Css-in-JS
- CSS-in-JS 방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식
- styled-components 패키지 사용
- yarn 에서 (yarn add styled-components) 설치
- props를 통해 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해 조건부 스타일링을 할 수 있다.
useState
- useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다.
- 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다.
const [state, setState] = useState(initialState);함수형 업데이트
-
함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행을 시킨다.
-
반면 일반형 업데이트 방식은 배치(batch)로 처리를 한다. 3번의 명령을 내려도 그 명령을 하나로 모아 최종적으로 한번만 실행을 한다.
setState(number +1); // 기존 방식
serState(() => {}); // 함수형 업데이트 방식useEffect(() => {}, [의존성 배열])
- useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.
- 컴포넌트가 화면에 보여졌을 때, 어떤 컴포넌트가 화면에서 사라졌을 때 무언가 실행하고 싶다면 useEffect를 사용한다. (mount, unmount)
- import React, { useEffect } from "react";
- 의존성 배열이 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 의미를 가진다고 했고 우리가 아무것도 넣지 않았으니 useEffect는 처음에 딱 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안된다.
의존성 배열
- 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.
- 의존성 배열이 비어있으면 처음에만 딱 한번 실행 후 이후로는 실행이 되서는 안된다.
Redux
- 리덕스를 사용하면 State를 공유하고자 할때 부-모 관계가 아니여도 되고, 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 그리고 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용이 가능해 진다.
Global state (전역 상태)
- Global state는 컴포넌트에 생성되지 않는다. 중앙화 된 특별한 곳에서
State들이 생성된다. ("중앙 State 관리소" 라고 생각하면된다.)
Local state (지역 상태)
- 컴포넌트에서 useState를 이용해서 생성한 State이다.
좁은 범위 안에서 생성된 State라고 생각하면 된다.- 리덕스란, 위에서 말한 "중앙 State 관리소"를 사용할 수 있게 도와주는 패키지(라이브러리) 입니다. (전역 상태관리 라이브러리)
리덕스 설치 명령어
yarn add redux react-redux
== 같은의미
yarn add redux
yarn add react-redux설정 코드는 이해하려고 하기보다는 리덕스 사용 방법에 중점을 두고 공부할 것.
have a nice day