[React] 컴포넌트 강제 리렌더링

문제상황

 

기본적으로 React에서 state가 변경되면 컴포넌트가 자동으로 리렌더링 됩니다.

그러나 가끔 컴포넌트가 참조하고 있는 state가 변경되어도 리렌더링이 일어나지 않는 경우가 있습니다.

저의 경우 외부 CSS 라이브러리를 사용하는 경우 이런 현상이 발생했습니다.

 

 

해결방안

아래와 같은 방법으로 컴포넌트를 강제로 리렌더링하여 해결했습니다.

1. key를 별도의 state로 관리하며 목표한 state 변경 시 key state도 함께 변경하기

2. key state 변수를 div 엘리먼트의 key props로 전달하기

 

export default function Component() {
  const [scriptCode, setScriptCode] = useState();

  const [data, setData] = useState();
  const [key, setKey] = useState(0);

  useEffect(() => {
    
    // setData
    axios.get('/')
    .then((res)=>{
      setData(res.data)
    })

    // key state 변경
    setKey(key+1)

  }, []);

  return (
    <div key={key}>
      {/* data state를 참조하는 JSX 코드 */}
    </div>
  );
}