230323: React 반응형 웹 / state 불변성

✅ React 반응형 웹 디자인

• 반응형 웹을 구현할 때는 디바이스의 종류와 사용자 그룹을 고려하여 적절한 미디어 쿼리를 적용하는 것이 중요하다.
• 여행에 관련된 정보를 얻는 것이 목적인 우리 프로젝트에서는 여행 중 간편한 사용성을 위해 데스크탑 버전을 기본으로 한 사이트에 모바일 버전까지 2가지를 제공하기로 했다.
• 세부 컴포넌트 내부에서 미디어 쿼리를 정의하고 처리하기 위해 `react-responsive` 모듈을 사용했다.
• 기본 설정했던 코드는 아래 링크 참고https://heyitzme.tistory.com/9

React 반응형 웹 디자인(react-responsive)

 

✅ React state 불변성의 원칙

• state를 변경할 때는 원본 값이 바뀌지 않도록 주의하자.
• 불변성 : 한번 생성된 값은 그 값을 변경할 수 없다
• React에서 state의 불변성을 유지하는 이유 : 컴포넌트의 안정성과 성능 최적화
  • 컴포넌트의 state를 직접적으로 변경하면 React가 이를 인지하지 못하고 다시 렌더링하지 않을 수 있음
  • state를 변경할 때마다 새로운 객체를 생성하면 성능에 부담이 될 수 있음
• 예를 들어, state에 저장되어 있는 배열을 정렬하고자 할 때, .sort()를 사용하면 원본 배열이 바뀌므로 .slice()를 사용해서 원본 배열을 복사한 뒤 정렬하자