[React Anti-patterns]컴포넌트 내부에서 관리되지 않는 상수값

 

리액트 컴포넌트 내부에 변하지 않는 싱글 리터럴 객체가 있는 코드

 

 

INFO 객체는 어디에서도 업데이트 되고 있지 않다.

가장 큰 문제점은 INFO 를 <header>의 children으로 내리고 있고, ShowCount 컴포넌트의 props로 내리고 있다.

INFO가 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될 때마다 같은 값이라도 또 다시 참조해서 트리거하고 계산해야 될 시기, 기억해야 될 시기에 대한 로직이 전혀 없으므로 불필요하게 참조하고 있다.

 

컴포넌트 내에서 useState로 관리할 수도 있지만 어쩌피 상태가 변하지 않기 때문에

NotUpdateValue 컴포넌트 외부로 INFO를 옮겨준다.

JSX 내부에서 참조하고 있더라도 같은 파일 내에 있으므로 참조가 가능하다.

이 컴포넌트가 다시 트리거, 마운트, 생성되고 다시 INFO가 참조 되더라도 INFO를 바라보는 참조는 동일하게 변치 않으므로

업데이트 되지 않는 상수나 고유 값들은 컴포넌트 외부에서 관리되도록 외부에 위치시키는게 좋다.