2024.01.24 TIL - 리액트 숙련(styled components, React Hooks(useState, ...)

📝 리액트 숙련 강의

• 1강 ~ 11강 중 주요내용 정리

Styled Components

1. Styled Components 란?

• CSS in JS : js코드로 css 작성하기 -> css 작성하는데 if, 삼항연산자 등 활용 가능!

2. 설치 및 사용 방법

1) 설치 방법

• VSC plug in 설치 & `npm install styled-components``
• App.js에서 styled import 해야 함

2) 사용 방법

• 기본

import styled from "styled-components"

const StBox = styled.div`
	width: 100px;
`;

function App (){
	return(
    <>
      <StBox>박스</StBox>
    </>
    )
}

• props로 받아서 개별 박스에 Style 주기

const StBox = styled.div``
width: 100px;
border: 1px solid ${(props => props.border.Color)};
`;

function App() {
return(
  <>
	<StBox borderColor="red">빨간 박스</StBox>
	<StBox borderColor="blue">파란 박스</StBox>
  </>
)
}

React Hooks

useState

• 기존 업데이트 : 배치성 업데이트
  • 변경사항 다 모아서 한번에 처리
  • 똑같은 처리가 여러개이면 한번만 처리됨
• 함수형 업데이트
  • setState(()=>{}) : () 현재값, {} 값 변경할 로직
  • setState 안에 함수가 들어옴!
  • 순서대로 한 번씩 실행 -> 똑같은 처리가 여러개여도 그냥 여러번 실행 됨

useEffect

• useEffect : 컴포넌트가 렌더링 될때마다 특정 작업 수행해야 할 때 쓰임

  • 컴포넌트가 화면에 보여졌을 때 -> 의존성 배열
  • 컴포넌트가 화면에서 사라졌을 때 -> clean up

• useEffect() : 매개변수는 콜백함수

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

  • useEffect(()=>{
    console.log('hello')}, []);

• clean up : 컴포넌트가 화면에서 사라졌을 때

  • useEffect(()=>{...
    return () => {}    // 이 부분이 clean up! 컴포넌트가 사라질 때 동작함!
    })

useRef

• useRef : DOM요소에 접근할 수 있게 함
  (js의 id값 처럼 특정 태그를 지정해서 접근할 수 있게 도와줌)

• 기본

const ref = useRef('초기값');    // ref는 {current: '초기값'} 이라는 객체
ref.current = '변경값'    // 변경 가능!

• 활용

// input 태그에 커서 focus 주기

const idRef = useRef('');

useEffect(()=>{
idRef.current.focus()
},[]);

...

<input ref = {idRef}>

React Hooks - 최적화

리렌더링과 최적화

• 리렌더링 발생 조건 3가지

  • state 바뀜
  • props 변경
  • 부모가 리렌더링될 때

• memo : memorization 메모리에 저장하는 것

• 캐싱 : 메모리에 임시 저장, 필요할 때 가져다 쓰는 것

• 최적화(optimization) : 리렌더링 많이 되면 비용도 올라감 -> 최적화 필요
  (전부 다 계속 리렌더링 되는 현상 방지하자!)

React.memo

• 컴포넌트를 메모리에 저장(memorization)
• 부모가 리렌더링되면 전부다 리렌더링되는 것 방지
• 사용법 : 분리된 컴포넌트 파일에 export defualt React.memo();

useCallback

• 함수 자체를 메모리에 저장
• 함수도 객체라서, 불변성 유지하는 작업이 필요함 -> 그래서 사용하는게 useCallback
• 사용법 예시

const initCount = useCallback(()=>{
	setCount(0);},[]);

useMome

• value(함수 반환값, 값 그 자체들)를 메모리에 저장
• 남용시 성능 악화
• 사용법 예시

const value = useMemo(()=>{
	return 기존 함수()
}, []);

DOM과 Virtual DOM(가상돔)

DOM

• DOM(Document Object Model)

  • html파일을 js가 알아들을 수 있는 obj로 모델링 해준 것!
  • 웹페이지의 element들을 tree형태로 표현한 것!
  • tree의 각 요소 : 노드
    • 해당 노드에 접근/제어(DOM 조작) 가능한 API제공
    • API : html 요소에 접근해서 수정할 수 있는 함수

• 가상돔(Virtual DOM)

  • 실제 DOM의 복사본!

  • 복사본을 js '객체' 상태로 메모리에 저장

  • 가상돔의 작동 방식
    ① 2가지 버전의 가상돔이 있음(화면 갱신 전, 화면 갱신 후)
    ② diffing : 두 버전 중 변한 부분이 어디인지 빠르게 스캔
    ③ 재조정(reconciliation) : 변경된 부분만 실제 DOM에 적용!

  • 변경 사항을 모두 모다 한번만 적용(Batch Update)

🐣 오늘의 느낀점

• 입문 과정도 쉽지 않았지만 이번 숙련 강의는 1강부터 어려워서 이번 주차는 어떻게 공부해나가야 할지 꽤 고민이 많이 되었다.
• 일단 계획은... 이해가 잘 안되더라도 빠르게 1회독 하기!! 지난 js문법 강의도, 리액트 입문 주차도 이렇게 1회독 한 다음에 과제 시작하면서 다시 차근차근 필요한 부분 위주로 2회독 하니까 이해에 도움이 됐던 경험을 바탕으로....!!
• 쉽지 않다...ㅠㅡㅠ 분명 한국말인데 무슨 말인지 모르겠고... 그래도 일단 듣기나 해보자...!😂😂😂😂 눈물을 머금고 ㅜㅡㅜㅋㅋ