📖 Styled-components
해당 컴포넌트 내에서만 사용한다.
import styled from "styled-components"Const 변수이름 = styled.태그 이름
` 백틱 안에 Css 방식으로 스타일 적용해주세요 `여기서의 변수는 태그로도 사용 될 수 있다.
그래서 스타일 된 컴포넌트라고 불린다!
가끔 프로젝트의 디폴트 값으로 스타일을 적용해야할 때가 있다.
(전역 스타일링 => 프로젝트 전체를 아우르는 스타일)
=> 그럴 때에는 globalstyle 사용
CSS - in - JS
- 자바스크립트로 CSS코드를 작성하는 방식
props를 통해 부모컴포넌트 -> 자식으로 조건부 스타일링이 가능하다.
Sass
문법적으로 어썸한 스타일 시트
Syntactically Awesome Style Sheets,
스타일 담아놓고 필요할 때마다 꺼내 쓰는 것 !!
브라우저마다 기본적으로 적용되어 있는 스타일 제거
= default style을 제거하는 방식이다.
Hook
📖 useState
가장 기본적인 훅
함수형 컴포넌트 내에서 가변적 상태 갖게함
배열을 구조분해 할당으로 받은 거다.
배열의 기본값은 초기값으로 지정한 state와
state를 변경할 수 있는 setstate의 배열로 이루어져 있다.
state를 변경하려면 setstate에 업데이트 시켜줘야한다!
Setstate 안에 함수를 넣어 업데이트 가능 !!!
UseState는 배치성으로 처리한다.
- 배치 업데이트 => 한꺼번에 변경된 내용을 모아서 한번에 실행
- 함수형 업데이트 => 변경된 내용을 모아서 각각 한번씩 실행
함수형 업데이트는 랜더링이 잦다 -> 성능에 이슈있음
그래서 리액트에서 배치 업데이트 사용함
📖 useEffect
랜더링 될 때마다 특정한 작업을 수행해야할 때 설정하는 훅
나는 화면 렌더링 될 때마다 어떤 작업을 하고 싶어!!!!
=> UseEffect 사용!!!
-
컴포넌트가 화면에 보여졌을 때
-
컴포넌트가 화면에서 사라졌을 떄
-
Import 써서 사용해야함 !!
흐름
1. input에 값 입력
2. state변경
3. state가 바뀌었기 때문에 => app 컴포넌트 리렌더링
4. 리렌더링 -> use effect
5. 1~4 반복
의존성 배열 => 이 배열에 값을 넣으면 , 그.값이 바뀔때만 useEffect 실행
어떤 값을 입력하든지 간에 어떤 값이 변하든간에 의존성 배열에는 값이 없기 때문에 화면이 처음 변할 때만 동작함
📖 UseRef
Dom요소에 접근할 수 있도록 하는 훅
원래는 쿼리셀렉터로 접근했으나,
리액트에서 돔을 선택할 때 UseRef 사용
Import React, {useRef} from “react”로 임포트
정리
1. state는 리렌더링이 꼭 필요한 값을 다룰 때 쓰면됨
2. ref는 리렌더링을 발생시키지 않는 값을 저장할 때 사용
3. 렌더링 되자마자 특정 input이 포커싱되어야 한다면 useRef 사용
Ex ) 네이버 켰을 때 검색창 자동으로 포커싱 됨
📖 UseContext
=> props 를 사용하면 드릴링이 발생하는 문제가 있다.
이 때 useContext를 사용하면 context로 데이터 받아와서 효율적으로 사용할 수 있다
단, 너무 많이 쓰면 부모-자식-그자식 까지 모두 리렌더링 되어버릴 수 있으니 조심해야한다.
최적화
Cost (비용)가 많이 발생하는 것을 줄여야하므로
불필요한 렌더링이 발생하지 않도록 최적화!
📖 React.memo => 컴포넌트
=> 컴포넌트를 메모리에 저장해두고 필요할때 갖다쓸 수 있다.
이 메모리에 저장해주는걸 캐싱이라고 부른다!
state의 변경으로 인해 props의 변경이 일어나지 않는 한 컴포넌트의 변경이 일어나지 않는다
📖 useCallback => 콜백함수
memo와는 다르게 useCallBack은 인자로 들어오는 함수를 메모이제이션한다.
함수를 괄호로 한번 감싸주고 의존성 배열을 놓아준다
Ex)
Const initCount = useCallback(( ) => {
setCount( 0 );
} [] );useCallback 함수가 갱신되면 의존성 배열에 그 해당 state를 넣어놓아야 함
처음엔 메모리 그대로 저장 => UseCallBack함수를 쓰면 최초의 주소값만 계속 내려옴.
존야 쓰고 있음
=> 그래서 컴포넌트가 다른 값이라고 인지하지 못 함 !
📖 UseMemo => Value
예를들어 위 영역과 아래영역이 나뉘어져있는데, 위 영역을 실행했을 때 state가 리렌더링되면서
아래의 값도 바뀔 때 UseMemo를 사용할 수 있다.
단, 너무 많이 사용하면 별도의 메모리 확보를 너무나 많이 하게 되므로 오히려 성능이 악화될 수 있다.
최적화 세 방법의 차이점
React.memo => 컴포넌트 메모이제이션
useCallBack => 함수 메모이제이션
useMemo => 함수가 리턴하는 값 or 값 자체의 메모이제이션 (Value)
