23.06.20
1. CSS-in-JS
1-1. styled-components 🔆
CSS-in-JS : JS로 CSS 코드를 작성하는 방식 => ‘컴포넌트를 꾸미는 것’
styled components : 우리가 CSS-in-JS를 할 수 있게 도와주는 ‘패키지’ => 컴포넌트를 꾸미는 걸 도와주는 ‘패키지’
그렇다면 여기서 ‘패키지’란 ?
리액트 자체에서는 없는 기능이지만 외부에서 가져와 사용할 수 있는 ‘기능의 모음집’ ? => ‘외부 라이브러리’ (= third-party)
이러한 패키지들은 npm이나 yarn(이라는 마켓들)에 모여있어서 이들을 통해 저러한 패키지들을 설치할 수 있음 !
(styled components를 사용하려면 vscode에서 플러그인 설치와, npm or yarn에서 패키지 설치 필수)
만든 styled components는 props를 이용해서 ‘조건부 스타일링’을 할 수 있음
그렇다면 여기서 props란 ?
props = 부모 컴포넌트가 자식 컴포넌트로 전달해주는 ‘정보’ (?)
즉, 부모 컴포넌트로 부터 받은 props와 조건문을 이용하여 조건부 스타일링을 하는 것임
1-2. GlobalStyles
GlobalStyles (전역 스타일링) : 프로젝트 전체에 영향을 미치는 스타일링
ex. body 태그 아래에 있는 모든 것에 일부 스타일을 공통적으로 적용하고싶다 !!! 할 때 사용
*styled components는 해당 컴포넌트 안에서만 영향
createGlobalStyle 이 또한 styled components에서 제공해준 API
1-3. Sass
Sass(Syntactically Awesome Style Sheets) : 스타일에 들어가는 내용(ex. #e4fkw2 - 색 이름)을 변수화 시켜서 대입함, 중첩해서 스타일을 중복 적용(ex. hover)할 수 있음, 다른 style 파일을 import 할 수 있음 => 이는 코드가 길어질 수록 효과가 나타나며 코드의 재사용성과 가독성을 향상시켜줄 수 있음
1-4. reset.css
각각의 브라우저는 기본적으로 설정되어 있는 스타일들이 있음 = 이것을 default style이라고 지칭
이 default style를 제거하기 위해 reset.css를 사용함
reset.css 파일을 만들고 그 파일을 import 해와서 적용시키면 됨
스타일을 꾸며주는 방법 4가지
-
App.css
.tag-name {
background-color: #01c49f;
} -
태그 명 옆에서 - style 객체
-
const 변수로 선언 - 객체
const style = {
backgroundColor: "#01c49f",
}; -
styled-components
2. Hook
2-1. useState 🔆
useState : 가장 기본적인 훅으로 함수형 컴포넌트 내에서 가변적인 상태를 갖게 함
const [state, setState] = uesState(초기값);
에서 원래는 useState가 return하는 값이 배열이다. 그 배열을 구조분해할당을 받은 것이고, 그 배열의 초기값으로 지정해놓은 state 변수와 이 state 변수를 제어(ex. 업데이트)할 수 있는 setState 이렇게 2개의 배열로 이루어져있다.
리액트에서는 컴포넌트를 변경하기 위해 (= 렌더링하기 위해) state를 파악하는데 ‘배치 업데이트’를 사용한다.
배치 업데이트란, 명령들을 다 모아서 한 번에 실행되는 건데 똑같은게 3개 있으면 똑같다고 생각해서 ‘한 번만’ 실행된다
그러나 ‘함수형 업데이트’는 명령들을 다 모아서 순차적으로 각각 ‘한 번씩’ 실행
함수형 업데이트에서 인자 부분에는 현재의 state가 들어오고 retrun부분에서는 바뀐 state를 반환하는 식이어서 그렇다
2-2. useEffect 🔆
useEffect : 렌더링 될 때, 특정한 작업을 수행해야할 때 설정하는 훅
ex. 컴포넌트가 화면에 보여졌을 때, return - 컴포넌트가 화면에 사라졌을 때
useEffect 안에는 매개변수로 콜백함수
useEffect의 흐름
- input에 값을 입력
- value, 즉 state가 변경
- state가 바뀌었기 때문에 -> App 컴포넌트가 리렌더링
- 리렌더링 -> useEffect()
- 1~4 반복해서 실행
비효율적인 렌더링, 불필요한 렌더링을 막기 위해 ‘의존성 배열 = Dependency Array ‘이 필요
그렇다면 여기서 의존성 배열이란 ?
의존성 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행
만약 의존성 배열이 빈 배열[ ] 이라면 ? => 그럼에도 동작함 ! 즉, 어떤 값이 변화하더라도 useEffect가 실행되지 않음
clean up은 useEffect 내부 return 안에서 작성하는 것으로 컴포넌트가 화면에 사라졌을 때 동작함
2-3. useRef 🔆
useRef : useRef는 컴포넌트가 계속해서 렌더링 되어도 unmount(죽기) 전까지 값을 유지함
그로 인해 저장공간으로서의 useRef vs DOM 접근 방법으로서의 useRef 2가지 용도로 사용됨
-
저장공간
state와 비슷하나 state는 변화가 일어나면 (ex. 값의 업데이트) 다시 렌더링 되고 내부 변수들은 초기화되나, ref에 저장된 값은 변화가 생겨 렌더링되어도 내부 변수들이 초기화되지 않음 => 즉, state는 리렌더링이 꼭 필요한 값에 사용하고, ref는 리렌더링 발생시키지 않는 값을 저장할 때 사용
=> 값은 증가되나 렌더링 되지 않았음 -
DOM 접근
렌더링 되자마자 (ex. 특정 input이 focusing 돼야 할 때) DOM에 접근할 수 있도록 도와주는 중간다리 ? 역할을 함. 그 이후에 직접적인 연결은 useEffect나 set() 등을 사용하면 됨
2-4. useContext
useContext (전역) : 어떤 컴포넌트인지 간에 (부모-자식 간 계층 관계없이) 전역적으로 선언되어 있는 데이터에 접근할 수 있음
그렇다면 왜 이것을 사용하는지 ?
prop drilling을 방지하기 위해 => 깊이가 너무 깊어지면 어떤 컴포넌트로부터 왔는지 파악 어려워지고 추적이 힘들어져서 대처에 늦어짐
context API 필수 개념
- createContext : context 생성
- Consumer : context 변화 감지
- Provider : context 하위 컴포넌트로 전달
