React 숙련

Styled Components

css-in-js
Js코드를 사용하여 컴포넌트의 css를 꾸밈
장점 : css에 조건문 사용 가능 => 조건부스타일링

전역스타일링

프로젝트 전체를 아우르는 스타일

Sass

• css를 효율적으로 사용하기 위해 만든 언어
  동일 코드를 복붙하는걸 줄여줌
  => HumanError 감소
• 코드의 재사용성을 높이고 가독성 향상

React Hook

useState

가장 기본적인 hook

const = [ state , setState ] = useState(초기값)

원래 useState의 return이 배열이라 구조분해할당

useEffect

렌더링 될때마다 특정작업을 수행해야 할 때 사용하는 훅

ex) 컴포넌트가 화면에 보였을 때,
컴포넌트가 화면에서 사라졌을 때

• 의존성배열 : 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect 실행

useRef

DOM요소에 접근할 수 있도록 해주는 훅

const ref = useRef(초기값)

초기값 -> 컴포넌트가 계속 렌더링 되어도 unmount 전까지 유지됨

• 저장공간으로 사용

  • state와 비슷, state는 렌더링이 일어나면 내부변수 초기화
  • ref는 렌더링x => 내부변수초기화 방지
    • state : 리렌더링에 필요한 값 저장
    • ref : 리렌더링을 발생시키지 않는 값을 저장

• DOM
  ex) 렌더링 되자마자 특정 input focus돼야 할 때 DOM의 정보를 활용