🔍 배경 및 궁금증
오늘 나온 이슈에 대해서 좀 더 검토해보고자 이 글을 쓰게 됐다,
오늘의 이슈는 무엇이었냐면,
Like를 할 때, 낙관적 업데이트를 했음에도 불구하고 제대로 Like API가 상위 컴포넌트에서 호출되지 않아서 문제가 발생한 것이었다.따라서 가장 큰 원인은 부모 컴포넌트의 리렌더링이 되지 않았던 현상이다.
이를 밑에서 setPost(
LikeAPI)를 통해 해결했지만, 결국 리렌더링 문제에 대해서 다시 살펴 보아야 할 필요성이 있어 찾게 되었다.📢 리렌더링의 조건
state 변경이 있을 때
- react 에서 유동적인 데이터를 저장하기 위해서 state 라는 것을 이용한다. 이때 state 값을 바꿔주기 위해서는 state 를 직접 조작해서는 안되고 setState() 메서드를 이용해 주어야한다. 왜냐하면 리액트는 state 의 변경이 감지되면 리렌더링을 해주는 데 메서드를 사용하지 않고 직접 바꿔주게 되면 리액트가 state 의 변경을 감지하지 못하게 된다.
새로운 props이 들어올 때
- 전달받은 props 값이 업데이트 됬다면 리 렌더링 된다.
부모 컴포넌트가 렌더링 될 때
- 새로운 prop 이 들어오지 않더라고 부모컴포넌트가 리렌더링 된다면 자식컴포넌트 역시 리렌더링이 된다.
shouldComponentUpdate에서 true가 반환될 때
- 각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있는데 이는 state가 병경되거나 새로운 props를 전달받는경우 실행이 된다 이때 기본적으로 return 값은 true 가 되어 rendering 이 시작되지만 rerendering 이 필요하지 않은 부분이라면 개발자가 return value 를 false 값으로 지정함으로써 리렌더링 되는 상황을 막아줄수 있게된다.
forceUpdate가 실행될 때
- props 나 state 가 아닌 다른 값이 변경되었을 때 리렌더링을 하고 싶다면 그때 사용할수 있는 메서드 이다.