[TIL] 07.06 react life-cycle

저번주는 노트북이 고장나서 수리를 맡겨 TIL을 쓰지 못했다.. 오늘 부터 다시 차근차근 써야겠다...

오늘은 React LifeCycle에 대해서 다시 찾아보는 시간을 가졌다. 컴포넌트 리팩토링을 하면서 리렌더가 안되는 상황이 발생했기 때문이다.

컴포넌트의 로직은

1. getInitialProps를 사용하여 ssr로 데이터를 받아서 store에 저장

2. 그 값을 props로 컴포넌트로 내려준다.

3. 주문 취소 버튼을 누르면 api가 실행이 되고 버튼이 disabled로 변한다. 

 

내가 여기서 간과했던것은 getInitialProps는 ssr이기 때문에 새로고침이 일어날 때만 렌더링 된다는 것이였고 FunctionComponent는 Props의 값이 변경 될 때만 re-render가 된다는 것이였다. 

현재 컴포넌트들은 FunctionComponent로 이루어져 있다. 그래서 부모 컴포넌트를 ClassComponent로 변경하고 이 컴포넌트에서 데이터를 받고 자식 컴포넌트는 FuctionComponenet를 사용하여 props를 받아 관리하는 형태로 바꾸어 주었다. 

부모 컴포넌트에서 handleClick 함수를 만들어서 이 함수가 실행이 되어 api가 실행이 되고 성공이 되면 state 값을 변경시켜 주도록 하여 re-render가 일어나도록 만들어 주었다. 

 

이렇게 로직을 바꾸면서 한가지 실수를 했는데 state 초기값을 그냥 임의로 지정을 해두어버렸기 때문에 이 값으로 버튼을 disabled 여부를 결정했는데 새로고침을 하고 나면 disabled가 풀려버리는 것이였다. 그래서 초기값을 받아오는 데이터의 값으로 변경을 하여 해결하였다.

 

오늘 배운것을 요약하자면

1. class Component 는 state 와 props 로 리렌더

2. Function Component는 props로 리렌더

3. getinitialProps 는 ssr 이기 때문에 렌더에 영향을 미치지 않고 새로고침 되는 겨우에만 실행이 된다.

4. 보통 동적인 데이터를 관리할 때는 class component 로 데이터 받고 FunctionComponent props 로 관리

5. class component state 초기값을 true 가 아니라 데이터에서 받아오는 값으로 설정했어야 했다.