[React] state 최적화를 위한 방법? (hooks 최적화)
개발을 하면서 살이 찌는 내 상황과 아주 똑같.. 이젠 살이찌니 배 부터 나오더랑 😞
이번엔 state 최적화를 위한 방법에 대해서 포스팅 해보고자 한다.
대략적으로는 알고 있지만 좀 더 구체적으로 내용을 다루고, 기록을 남기고자 포스팅을 끄적인다!
먼저 state 에 대해 간략하게 적고~ 본론인 최적화를 위한 방법으로 넘어가겠다.
State 란?
리액트를 다루는 핵심이라고 볼 수 있다!
- 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다.
- 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다.
- 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.
💡 상태변경은 기본적으로 event trigger 기반으로 이루어진다.
💡 상태변경의 개념은 데이터를 변화하는게 아니라, 데이터를 state로 취한 후에 새로운 객체(state)를 반환하여 새로운 데이터의 "상태"를 얻는 개념이다.
🙌🏻 또한 state는 UI와도 연관이 있다.
- 그 이유는 UI와 데이터 모델은 보통 인포메이션 아키텍쳐 (information architecture) 와 서로 깊게 연관되어있기 때문이다.
이 말은 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리하면 되는데, (내가 이해 하기로는.. )단일 책임 원칙과 비슷한? 느낌이다.
방법1️⃣ . Independent child, careless parent
- 리액트는 특정 state가 변경되면 그 state가 선언된 컴포넌트와 그 하위 컴포넌트들을 모두 리렌더링 시킨다.
- state를 사용하는 최상위 컴포넌트보다 더 상위 컴포넌트에 state를 선언하면 state를 사용하지 않는 더 많은 컴포넌트들이 state변경에 의해 불필요한 리렌더링을 겪게 된다.
👉🏻 (즉, 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 렌더링이 된다. )
1-1.state 선언은 어디서 하는 게 좋을까?
Independent child와 careless parent를 직역 하면
➡️ 독립적인 자녀, 부주의한 부모 라고 하는데
❗️이처럼 부모 컴포넌트에 의존하지말고 하위 컴포넌트들은 독립적으로 state 관리가 되어야 한다❗️
나쁜 예시
😞 Bad코드
이런식으로 부모 컴포넌트 안에 state를 선언해주었다.
렌더링 결과는? 👇🏻
둘째는 렌더링이 될 필요가 없는데 부모에 state 선언을 해주어서 전체가 렌더링이 되는걸 볼 수 있다.
즉, 불필요한 렌더링이 일어나는 것!
좋은 예시
😃 Good코드
이런식으로 렌더링이 필요한 자식 컴포넌트 안에 state를 따로 선언해주었다.
렌더링 결과는? 👇🏻
이렇게 첫째만 렌더링이 되는걸 볼 수가 있다!
방법2️⃣ . Minimal states, minimal render
두번째 방법!
- 최소 상태, 최소 렌더이다.
- 최소한의 state를 사용해 최소한의 렌더를 일으키게 하는것이다.
- 하나의 state로 관리가 가능한 값들이라면 새로이 state를 선언하지 말고 기존 state를 사용할것.
나쁜 예시
좋은 예시
방법3️⃣ . lifting the state
Lifting the State(상태 끌어올리기)
- 리액트는 데이터가 부모 컴포넌트에서 자식 컴포넌트로 단방향으로 (Top to Bottom) 흐른다.
만약, 자식 컴포넌트의 어떤 이벤트에 의해 부모 컴포넌트의 상태가 바뀐다면, 역방향으로 데이터가 흐르고 이는 리액트의 단방향 흐름 원칙에 위배되는 걸까?
👉🏻 리액트에서는 단방향 흐름의 원칙을 지키면서, 자식 컴포넌트에서 부모 컴포넌트로 데이터를 보내기 위해 (Bottom to Top)한 방법으로 상태 끌어올리기라는 방법을 제시한다.
❓ 방법은 부모 컴포넌트의 상태 변화함수를 ➡️ 자식 컴포넌트에 인자로 전달하고 자식 컴포넌트에서 그 함수를 실행시켜 부모 컴포넌트의 상태를 변화시키는 것이다.
👉🏻 결과는 잘 작동한다!
정리해보자면 , 자식 컴포넌트에서 버튼을 클릭하면 이벤트 핸들러(handleClick)가 실행되는데, 그 핸들러는 자식 컴포넌트가 인자로 입력받은 함수 (콜백함수, 부모 컴포넌트의 상태변화함수)를 동작시키고, 그 결과 부모 컴포넌트의 상태가 업데이트 된다!
참고
https://cocoder16.tistory.com/36
https://reactjs-kr.firebaseapp.com/docs/thinking-in-react.html