● UI 준비하기 프레젠테이셔널 컴포넌트 : props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트를 말한다. 컨테이너 컴포넌트 : 리덕스와 연동되어있는 컴포넌트로, 리덕스로부터 상태를 받아 오기도하고 리덕스 스토어에 액션을 디스패치하기도 하는 컴포넌트를 말한다. 먼저 컴포넌트를 만들기 전에 redux와 react-redux를 설치합니다. npm i redux npm i react-redux 다음 카운터 컴포넌트와, 할일 컴포넌트를 만들어보겠습니다. src 폴더 > components 생성 후 > Counter.js Counter.js const Counter = ({ number, onIncrease, onDecrease}) => { return ( {number} +1 -1 ) } 먼저 카운터..
왜 리덕스를 사용해야할까요? Context API를 통해서 다양한 상태를 관리를 할 수 있고 가장 최고 레벨에 있는 컴포넌트 안에는 JSX만 남겨 깨끗한 코드로 유지할 수 있지만, 프로젝트 규모가 커짐에 따라 아래와 같은 코드를 마주해야할 수도 있다. Provider로 감싸진 컴포넌트들의 지옥에 빠져버릴 수도있다는 것.. 그래서 Redux가 필요해지게 된다.!! 물론, 소규모 프로젝트에서는 Context API를 통한 상태관리로도 충분할 수 있다. ● 개념 미리 정리하기 개념을 미리 접하기 전에, 먼저 리덕스의 구조를 좀 보면 이해하기가 쉽다. 그리고 확실히 Redux를 배우기전에 useReducer를 공부해놔야 구조를 더 이해하기가 쉬운 것 같다. useReducer를 공부할 때, 초기 설정값과 typ..
그동안 useMemo, useCallback이 어떤 차이점을 가지고 있는지에 대해서 탐구하느라 조금 오랜시간이 걸렸습니다.. useReducer도 왜 사용하는지에 대해서도 탐구하느라 .. 그럼 이제 Context API를 배워볼까요? ● Context API 왜 쓸까요? 우리는 App.js라는 가장 부모 컴포넌트에서 state를 만들고, 이 state를 변경하기 위해서는 state끌어올리기라는 행동을 해왔습니다. 이 state를 변경하는 컴포넌트가 부모 컴포넌트의 자식 컴포넌트 또 그 자식컴포넌트라도 그에게 꼭 state를 변경할 수 있는 함수를 넘겨주곤 했씁니다.. 그럼 중간에 끼어있는 컴포넌트들은 그저 props를 전달해주는 역할밖에 하지 않음에도 props들을 전달해준 것이죠. 이를 props ch..
useRef는 렌더링에 필요하지 않는 값을 참조할 수 있는 React Hook입니다. 렌더링이 잦게 되면 리액트의 성능에 문제가 생길 수 있기 때문에, 렌더링이 될 props, state와 렌더링이 되지 않을 값을 구분하는 것은 매우 중요한 일이다. const ref = useRef(initialValue) 공식 문서에 따르면 ref는 위와같이 사용될 수 있다. ref.current 프로퍼티를 변경해도 React는 컴포넌트를 다시 렌더링하지 않습니다. ref는 일반 자바스크립트 객체이기 때문에 React는 사용자가 언제 변경했는지 알지 못합니다. 초기화를 제외하고는 렌더링 중에 ref.current를 쓰거나 읽지 않는 것으로 합쉬다. ● useRef 사용법 : 클릭카운터 const App = ()=>{ ..
자바스크립트였다면 const, let, var을 사용해서 변수를 선언했을텐데 React에서는 state라는 훅을 사용해 변수를 선언하고 저장한다. useState는 배열로 리턴되고, 배열의 첫 번째는 설정값, 그리고 두 번째에는 값을 수정하는 setter함수로 구조가 배정되어있다. //[리액트 공식문서] const [state, setState] = useState(initialState); 사실 state에 대한 사용법은 너무 익숙히 다뤄봐서 포스팅을 하는게 맞나? 싶었지만, 공식문서를 읽어보니 알고있지 못했던 점이 많아 포스팅을 하는게 좋다고 생각했다. ●usestate 사용법 : 카운터 function App() { const [count, setCount] = useState(0); const p..
● 리액트에게 의존성으로 거짓말하는게 좋을까? ([ ], 빈배열로 한번만 실행하는게 조을까?) function Greeting({ name }) { const [counter, setCounter] = useState(0); useEffect(() => { document.title = 'Hello, ' + name; }, [name]); ... } 위의 예제에서 props에서 받아오는 name이 변하게 된다면 변할 때마다 렌더링 될 것입니다. 만약 'Dan'이였다가 'Yuzhi'로 변하게 된다면, 아래와 같은 절차를 밟아 확인할 것입니다. 의존성이 변했으니 렌더링이 되겠죠? 하지만 빈배열을 넣는다면 어떻게 될까요? 의존성이 같으므로 이펙트를 스킵할 것입니다. 그렇다면, 1초마다 숫자가 올라가는 카운터를..
