개발자로 살아남기-캐나다

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..

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

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