State
리액트를 배우면서 state라는 것에 대해 알게됐다.
말 그대로 상태라는 것인데, 현재 상태에서 다른 상태로 변경시키기 위해 useState라는 훅을 사용해서 상태를 관리했다.
useState는 state와 그 state를 변경할 수 있는 modifier 함수를 배열 형태로 준다.
이 state를 변경하는 함수를 부모 컴포넌트에서 만들고 이걸 prop으로 자식 컴포넌트에게 넘겨서 자식 컴포넌트에서 state가 변경될 수 있게 해줬는데(데이터는 단방향 이벤트는 역방향으로) 컴포넌트가 늘어나면서 단순히 prop을 전달만 해주기 위해서 사용되는 중간 컴포넌트들이 많이 생겼다. 이런 props drilling을 겪고 state와 그 modifier 함수를 자유롭게 쓰지 못하는 단점때문에 부모 컴포넌트에 종속되어 있는 state가 아닌 중앙 저장소에서 사용할 수 있는 state를 써보기 위해 redux를 사용했다.
redux는 중앙 저장소인 confingStore에서 모듈로 만든 reducer들을 하나로 합쳐서 내가 사용하고 싶은 컴포넌트에서 useSelector 훅으로 저장소를 불러와서 state를 변경할 수 있다.
결론적으로 내가 만들면서 느낀 것은 state를 관리할 컴포넌트에서 그 state가 다른 컴포넌트로 이동하거나 다른 컴포넌트에서 컨트롤할 일이 없다면 그냥 그 컴포넌트에서 useState로 상태 관리하는게 더 편한 것 같다.
반대로 state가 다른 컴포넌트로 전달되어야 하거나 거기서 컨트롤 할 일이 생긴다면 redux로 상태를 관리하는게 더 편한 것 같다.
Props
props는 부모 컴포넌트에서 자식 컴포넌트에 데이터를 넘겨줄 때 쓸 수 있는 방법 중 하나이다. property에 데이터를 담아서 넘겨주면 자식 컴포넌트는 전달된 key 값으로 그 value인 데이터를 사용할 수 있다.
데이터는 문자열, 숫자열, 함수일 수도 있고 배열일 수도 있고 state일 수도 있다. 이 props 덕분에 데이터를 컴포넌트 간에 손쉽게 전달할 수 있게 된다.
리렌더링 발생 조건
리액트로 컴포넌트를 만들어서 렌더링하게 되면 특정 조건들에 의해서 컴포넌트가 리렌더링 될 때가 있다. 크게 3가지 경우로 나눌 수 있다.
- 내 state가 변경될 때 리렌더링 된다.
- 부모로부터 받은 prop이 변경될 때 리렌더링 된다.
- 부모가 리렌더링되면 자식도 리렌더링 된다.
3번의 경우는 부모로부터 받은 prop이 변경되지 않더라도 부모가 리렌더링 됐다면 그 안의 자식 컴포넌트도 같이 리렌더링 된다는 것을 의미한다.
리렌더링 발생 조건을 제대로 숙지하고 있어야 불필요한 리렌더링이 일어나지 않게 컨트롤하면서 최적화 시키는 코드를 만들 수 있다.
