리액트와 전역 상태관리
리액트에서 빠질 수 없는 상태관리. 상태 즉, state를 관리한다 라고 표현한다. 그럼 state관리 과 왜 필요한지를 알아보기 위해서는 우선 프로퍼티 에 대해서 알 필요가 있다.
1) Property
프로퍼티 (이하 프로퍼티/property/props)는 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 프로퍼티가 갖고있는 가장 큰 특징은 수정할 수 없다이다.
프로퍼티 특징
- 상위 컴포넌트에서 하위 컴포넌트로 전달된다.
- 하위 컴포넌트는 상위에서 받은 컴포넌트 값을 수정할 수 없다.
=>단방향으로 데이터가 흐른다.라고 표현- 프로퍼티에 문자열을 전달할 때는
""큰 따옴포를 사용한다.- 숫자, boolean등의 값을 전달할때는
""큰 따옴표로 전달하면 이 값들도 문자열로 전달되기 때문에{}중괄호를 사용해서 전달해야 함.- props에 기본 값을 지정하고 싶다면
defaultProps사용하면 된다.
하위 컴포넌트
상위 컴포넌트
하위 컴포넌트로 넘겨 줄 props 값이 텍스트면 ""큰 따옴표로 넣어서 전달 onClick 처럼 함수를 넘겨주는 거면 {}중괄호로 전달.
2) state로 상태 관리하기
어????? 아니 프로퍼티는 컴포넌트 내부에서 값을 바꿀 수 없다면서!!!
그럼 쇼핑몰이나 우리가 사용하는 사이트에서 값을 바꿔야 하는 경우 에는 어떻게 하는건데???
이 때 사용하는것이 state 이다.
state는 값을 저장하거나 변경할 수 있는 객체로 보통 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용된다.
state는 setState()함수로 변경한다
state에 저장되는 객체는 반드시 초기화 해야한다.
그렇지 않으면 내부 함수에서 state값에 접근할 수 없다. 만약, 마땅한 초기값이 없다면 state에 빈 객체 {}라도 넣어줘야 한다.
그리고, state에 저장되는 객체의 값은 직접 변경하면 안되고, setState()함수를 이용해서 변경해야 한다. 그래야 render() 함수가 호출되어 변경된 state 값이 출력된다.
3) 전역 상태관리
프로젝트의 크기가 커질수록 컴포넌트가 분리되어 컴포넌트들이 점점 더 많아질텐데 state들을 관리하기 위해서 제일 꼭대기 컴포넌트에서 제일 아래 컴포넌트까지 props가 전달되는 일이 생기는데, 이 과정에서 이 컴포넌트가 필요없는 props까지 전달받아야 하는 상황이 발생하는 props drilling이 발생한다.
과도한 pros drilling을 피하기 위해서는 여러가지 방법이 있는데,
컨텍스트를 이용하여 상태관리 하는 방법이 있고, 전역 상태관리 라이브러리(redux)를 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러서 사용할 수 있다.
리덕스와 컨텍스트 중 무엇을 사용할까?
Redux : 서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우
컨텍스트 : 컴포넌트의 통합 데이터를 관리하는 경우
CSS 라이브러리
2021년 React 컴포넌트 라이브러리 Top 8
1) Material UI
2) React Bootstrap
3) Chakra UI
4) Semantic React UI
5) React-Icons
6) AOS
7) Faker
8) React Charts
