🌈React

⭐개념, 장점

개념: UI를 구축하기 위한 JS 라이브러리
장점:

• Virtual DOM으로 App 성능 향상
• 컴포넌트 가독성 우수함
• 유지보수 쉬움
• 다른 프레임워크와 혼용 가능

단점:

• 단순 라이브러리로 의존성 모듈 필요(import)

⭐컴포넌트(Component)

개념: App UI 구축의 기반
특징:

• 재사용 가능
• 서로 독립적으로 존재
• 구성요소 간 의존하지 않음 -> UI 개발 용이

⭐클래스형(Class) 컴포넌트 (❌)

class App extends React.Component {
  render() {
    return;
  }
}

• State, LifeCycle 기능
• render() 필수 작성
  
  

  👀 LifeCycle (Method)

  개념: 컴포넌트가 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때까지의 과정

  • componentDidMount :컴포넌트 나타남
  • componentDidUpdate :데이터 변경
  • componentDidUnmount :컴포넌트 사라짐
    
    단점:
  • 상태(State)관련 로직이 한 공간 안에 묶여 있음
  • 컴포넌트 재사용 어려움

⭐함수형(Function) 컴포넌트 (⭕)

export default function App() {
  return;
}

특징:

• Hook 사용 -> State, LifeCycle 기능 이용
  
  

  👀 useEffect (LifeCycle 대신)

  개념: 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook
  
  특징:

  • 계층 변화 없이 상태 관련 로직 재사용 가능
  • 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나눔
  • 화면에 렌더링이 완료된 후 수행 || defendency 변경 시 수행

⭐Hooks

개념: 함수 컴포넌트에서 State, LifeCycle을 연동 가능하게 하는 함수
(클래스 컴포넌트의 장점을 가져온 것)

특징:

• 재사용 가능
• 관리 용이

종류
-기본
useState(동적 상태 관리): 렌더링하려면 setState 사용(직접 수정하면 안 됨), state의 불변성 유지,
useEffect(side effect 수행 -mount/unmount/update)
useContext(컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)

useReducer(복잡한 컴포넌트들의 state를 관리 -분리)
useCallback(특정 함수 재사용)
useMem (연산한 값 재사용)
useRef(DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
useImperativeHandle
useLayoutEffect
useDebugValue

-그외
custom hook

⭐상태(State)관리 라이브러리

Redux

• action, reducer, selector, store를 세팅하는 보일러플레이트 코드로 구성
• 오직 하나의 store만 가지며 하나의 객체 트리를 가져서 디버깅 용이
• store 내부 상태는 action이라는 객체에 의해서만 변경할 수 있다.

Recoil

• atom과 selector로 이루어져 있음
• Context API와 다르게 업데이트된 state 부분만 리렌더링

Rest API → react-query: API로부터 데이터 불러오기, 저장 자동화 + Recoil
GraphQL API → apollo-client + Recoil 이용

⭐Virtual DOM(Document Object Model)

개념:
UI의 이상적, 가상적 표현을 메모리에 저장
→ ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화(재조정)하는 프로그래밍

특징: 효율성

• 실제 DOM의 변화를 최소화하여 시간복잡도를 줄임
• 컴포넌트 렌더링 → 기존 DOM 변경사항 비교 → 업데이트할 요소 목록 생성 → 최소한의 변경
  ex) HTML에 20번 변화 → VDOM → 실제DOM(1번의 변화로 인식) → 1번의 렌더링

⭐JSX(JavaScript XML)

개념: JS 문법의 확장(HTML처럼 보이는 코드를 작성할 수 있도록 함)
사용법: 컴포넌트는 대문자로 시작, props의 기본값은 true ...
Tip: JS <-> JSX 사이트 babeljs

⭐Context

React Context 공식 문서
프롭스 드릴링(Props Drilling)을 피하고 싶을 때 사용

개념: 중간 과정없이 props를 전달할 수 있는 API
특징: 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있음
API 종류:

• React.createContext: context 생성
• Context.Provider: value prop을 받아서 이 값을 하위 컴포넌트에게 전달
• Context.Consumer: 함수 컴포넌트안에서 context를 구독
• Context.displayName: context를 개발자 도구에서 어떻게 보여줄 지 결정

import { createContext } from "react";

function App() {
  const ThemeContext = React.createContext('light'); // 기본값 'light'
  ThemeContext.displayName = 'MyTheme'; //"MyTheme.Provider" in DevTools
  
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 중간에 낀 컴포넌트
// props 전달할 필요 X
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// 전달할 컴포넌트
import { ThemeContext } from './theme-context';
import { useContext } from "react";

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <div>
      <Button color={theme} />
    <div/>;
  );
}

⭐성능 최적화

렌더링: UI를 어떻게 구성할지 컴포넌트에 요청하는 작업
리렌더링: 해당 컴포넌트의 모든 객체(함수 포함) 재생성
#tip JS에서는 값이 동일해도 참조 주소가 다르면 다른 객체로 인식

• 부모 컴포넌트 렌더링, props 변화, state 변화 있을 때
• UI 변화가 없는데 렌더링된다면 불필요한 시간이 소요됨
  → 이러한 불필요한 리렌더링을 막는 것이 성능 최적화
  → React가 실제로 DOM을 변화시키는지 확인

1. useMemo: 메모이제이션 된 값 반환

• dependency 값이 변할 때만 새로운 함수 생성
  → 자식 컴포넌트 리렌더링 방지

2. useCallback: 메모이제이션 된 함수 반환

• dependency 값이 변할 때만 새로운 함수 생성
• (부모 컴포넌트 리렌더링 → props로 넘긴 함수 재생성 → 자식 컴포넌트: 어? 새 거네? 리렌더링!) 을 방지 → 부모 컴포넌트에서 props로 넘길 함수를 useCallback으로 감싸기

3. React.Memo: 컴포넌트 메모이제이션

• 부모 컴포넌트로부터 넘겨받는 props가 같다면 메모이제이션 해둔 결과를 가져옴
• 부모 컴포넌트가 바뀌어도 바뀔 필요가 없는 자식 컴포넌트에 사용

4. key값으로 index 사용하지 않기

• 배열 추가, 변경, 삭제 시 뒤의 요소가 모두 변경 → 오류
• 배열 변경할 일 없어도 코드 일관성을 위해 사용 안하길 권장

// Bad Example
Array.map((value, index) =>
  <Component key={index}>)

5. useState 함수형 업데이트

• useCallback의 디펜던시에 값을 넣지 않아도 됨

// Example
useCallback(() => {
  setState((state)=>state + 1)
}, [])

// Bad Example
useCallback(() => {
  setState(state + 1)
}, [state])

state & props

state: 컴포넌트 내부에서 선언하며 내부에서 값을 변경
props: 부모 컴포넌트가 자식 컴포넌트에게 주는 값(자식 컴포넌트에서 수정 불가)

프롭스 드릴링(Props Drilling)

개념: 해당 props가 필요없는 자식 컴포넌트까지 통해서 전달하는 상황
해결: context API, Redux, Recoil 등 사용

스타일링 방식

• inline styling
• css
• styled-component

제어(Controlled)/비제어(Uncontrolled) 컴포넌트