Front-End/React 3

[React Anti-patterns] useState 대신 useRef

useState가 필요하지 않은 경우 컴포넌트의 전체적인 수명과 동일하게 지속된 정보를 일관적으로 제공해야하는 경우 => 특정 플래그 값 혹은 한 번 고정된 값을 컴포넌트에서 계속해서 사용하는 경우 isMount 변수는 본인이 속한 컴포넌트와 수명을 같이한다. 불필요한 리렌더링을 방지하고, 렌더링 프로세스와 관계없이 값을 가변적으로 저장하고 싶은 경우 useRef를 고려해 볼 수 있다.

Front-End/React 2023.11.29

[React Anti-patterns]불필요한 상태 제거하기

1) 상태를 플래그로 바꾸기 a조건과 b조건에 따라 로그인여부를 관리하는 상태는 굳이 필요없다. 매 렌더링때마다 컴포넌트 안의 isLogin 플래그가 다시 계산 되게 할 수 있다! 위와 같은 방식으로 활용 가능하다! 2) 불필요한 상태 제거하기 특정 값을 만족하는 리스트만 따로 저장하고 싶을 때 useState를 사용할 때가 있는데 비추천된다. 업데이트 되는 값이고, 렌더링마다 고유의 값을 가질 수 있다고 가정할 수 있을 때 상태를 만들지 않고, 내부의 변수로 사용할 수 있다. 리액트 내부의 변수는 렌더링마다 고유의 계산된 값을 가진다.

Front-End/React 2023.11.29

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

리액트 컴포넌트 내부에 변하지 않는 싱글 리터럴 객체가 있는 코드 INFO 객체는 어디에서도 업데이트 되고 있지 않다. 가장 큰 문제점은 INFO 를 의 children으로 내리고 있고, ShowCount 컴포넌트의 props로 내리고 있다. INFO가 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될 때마다 같은 값이라도 또 다시 참조해서 트리거하고 계산해야 될 시기, 기억해야 될 시기에 대한 로직이 전혀 없으므로 불필요하게 참조하고 있다. 컴포넌트 내에서 useState로 관리할 수도 있지만 어쩌피 상태가 변하지 않기 때문에 NotUpdateValue 컴포넌트 외부로 INFO를 옮겨준다. JSX 내부에서 참조하고 있더라도 같은 파일 내에 있으므로 참조가 가능하다. 이 컴포넌트가 다시 트리거, 마운트..

Front-End/React 2023.11.20