이번 시간엔 앞서서 미리 봤었던, React hook에 대해서 살펴보자. 해당 문서는 전반적으로 React 공식 문서를 정리한 글이다. Hook이란? Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서는 동작하지 않고 기존에 Class component에서 class 없이 React를 사용할 수 있게 해준다. React에서 제공하는 내장 hook은 단순히 "use"로 시작하는 모든 함수를 말한다. Motivation of Hook React에서 Hook이 나오게 된 계기는 다음과 같다. Component 사이에서 state 로직을 재사용하기 어렵다. 복잡한 compone..
Definition of Context API 이번 시간에는 더 큰 React 어플리케이션에서 마주칠 수 있는 다른 문제들에 대해서 알아보자. 해당 문제는 props를 통해 많은 component를 거쳐 많은 데이터를 전달할 때 발생한다. 이제까지 각 componenet에서 데이터를 상위, 하위의 데이터를 받아오는 방법을 배웠다. Props Chains 아래의 시나리오 구조를 살펴보자. 해당 어플리케이션은 로그인 기능이 있으며, 쇼핑몰처럼 물건을 선택해서 카트에 저장할 수 있다. 로그인에 대한 정보는 LoginForm component에서 사용자로 받아와서 state 형태로 저장될 것이다. 그 정보는 Shop과 Cart에서 사용되기에 전달해줘야한다. 하지만 데이터가 필요할 수도 있는 다른 componen..
앞서 useState()와 useReducer()에 대해서 배웠다. 그 둘은 state와 state를 관리해주는 hook이라는 점에서 비슷한 점이 많았다. 어떤 것을 사용해야하지는 헷갈릴 때가 많을 것이다. useState()를 반드시 사용해야하는 건 언제인지, useReducer()를 사용해야 좋을 때는 언제인지 정리해보자. 항상 적용되는 규칙은 아니겠지만 적어도 언제 useReducer()가 필요한지 알게 될 것이다. 예를 들어, 너무 많은 일들을 처리해야 하는 상황에 useState()를 사용하면 너무 번거로울 때가 있다. 각각의 state들은 서로 독립적이기 때문에 같이 업데이트가 잘 안된다. useState()는 주요 state 관리 도구로써, 개별 state 및 데이터를 다루기 적합하다. 한 ..
What is useReducer()? 앞서서 useState()와 useEffect()에 대해서 다뤄봤었다. 이번에는 다음 React hook인 useReducer()에 대해서 이야기해보자. 간단히 말해, state의 관리를 도와주는 것으로 useState()와 비슷하다. 오히려 더 많은 기능들을 가지고 있다. 특히, 더 복잡한 state에 유용하다. 예를 들어, 여러 state들이 함께 속해 있는 경우에 같이 바뀐다던가 서로가 관련되어 있다면 관리하는 측면에서 사용이나 관리가 어려워지거나 오류가 발생하기 쉬워진다. 효율이 나빠지거나 버그가 생길 수 있는 코드가 되기 쉽상이다. 물론 그런 상황에 다다르는 것을 원하는 개발자는 아무도 없을 것이다. React project를 진행하면서 더 강력한 stat..
이전 시간에 이어서 side effect를 해결하기 위한 방법에 대해서 이야기 해보자. Side Effect란? React의 목적 React는 사용자의 입력에 반응하여 필요할 때마다 UI를 렌더링한다는 주요 임무를 갖고 있다. state나 event들의 특징을 보자면 화면에 무언가를 가져오는 것들이었다. 그리고 사용자가 coding-leaf.tistory.com useEffect()란? React에는 side effect를 처리하는 더 좋은 도구가 있다. useEffect()라는 hook으로 component함수 내부에서 실행할 수 있는 또다른 함수이다. 이 함수는 특별한 일은 하는데, useEffect() 그리고 2개의 parameter와 같이 호출된다. 첫 번째 parameter는 함수로, 모든 co..
