분류 전체보기

리액트로 크롬 익스텐션 만들어 보기 시작 부터 출시까지

최근들어 많은 웹사이트들이 blur 효과와 회원가입 창을 화면 전체에 뛰어서 원하지 않는 가입을 강요 합니다. 여러 서비스가 필요하다면 유저가 가입 하겠지만 어떤 한 정보만 확인 하고 가고 싶은 유저에게는 사요을 많이 불편하게 합니다. 그래서 이번에 공부도 할 겸 크롬 익스텐션을 한번 리액트로 만들어보고 런칭을 해보려고 합니다. 만들고자 하는 기능은 간단 합니다. 유저가 익스탠션을 클릭하면 로딩된 것중에서 filter blur css 효과를 없에주고 화면 전체를 가리는 회원가입 권유 창등을 제거 해 줍니다. 일단 그러기 위해서는 리액트 프로젝트 설정을 해야 합니다. 먼저 create-react-app을 통해서 시작을 해보겠습니다. 타입스크립트 공부도 할 겸 일단 타입스크립트를 베이스로 만들어 보겠습니다...

Redux vs React context api 어떤 경우에 사용 할 까?

Redux는 리액트 에서 많이 사용되는 state 관리 라이브러리 이고 context api는 리액트에서 기본으로 제공하는 state 관리 api 이다. 대부분에 경우 state management 라이브러리인 redux를 사용하는데 왜 그런지 알아보도록 하자. 먼저 Redux와 context api에 특징에 대해서 알아보자 Redux 컴포넌트에 state를 prop으로 넘겨 줄 때 어느 컴포넌트 깊이와 상관 없이 넘겨줄 수 있다. 만약에 컴포넌트 구조가 아래와 같이 되어 있는데 // const child3Reducer = { candies: [] iceCreams: [] } const Child3 = () => { const iceCreams = useSelector(state => state.chil..

리액트 훅(React hook)이란? 예제로 알아보기

이번 글에서는 리액트에서 제공하고 있는 훅에대해서 설명하고 어떻게 사용하는지 예시를 보면서 배워 보겠습니다. 앞에 글에서 리액트 훅이 왜 나오게 되었고 어떻게 사용되는지 간단하게 알아보았습니다. 앞에글을 읽어 보시면 더 이해가 잘 될 것이라 생각됩니다. useState 클래스 형태의 컴포넌트에서 사용하던 state와 setState를 사용할 수 있게 해주는 함수 입니다. useState은 기본 값을 받을 수 있고 현재 state와 state를 업데이트 할 수 있는 함수를 리턴합니다. const [showList, updateShowListState] = useState(false) // false는 기본값 const [todoData, updateTodoData] = useState({ todos: []..

React-hook 이 나온 이유와 사용 해야 하는 이유

React hook이 나오기 전 까지는 리액트 life cycle을 사용하기 위해서 Class를 사용해야 됐었습니다. 리액트를 클래스로 사용하기 위해서는 React.Component를 extend 해야 하고 state을 사용하려면 super(props)도 적어 줘야 합니다. 대부분은 이게 왜 필요한지 모르고 적고 있었습니다 하지만 없으면 안 돌아가니까 계속 적어주는 것이죠. 이런 부분은 자동으로 되면 좋을 것 같은데? 그리고 Class를 사용해서 재사용 가능한 로직을 만들려면 HOC(High-Order-Component)를 사용해서 만들어야 되는데 이걸 사용하다 보면 나중에는 HOC 헬을 격게 되고 코드도 이해하기가 상당히 힘들어집니다. state를 정의하고 업데이트하는데도 많은 코드가 필요했습니다. 이..