1. Udemy

Fragment

• component 안에는 하나의 최상위 태그만 가질수 있기때문에 여러개의 태그가 있으면 하나의 태그로 묶어줘야한다
• 이때 의미없는 div 태그를 사용하고싶지 않으면 <React.Fragment> 태그나 <> 빈태그를 사용해준다
• DOM에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다

---

Portals

• 리액트 프로젝트에서 컴포넌트를 랜더링하게 될 때, UI 를 어디에 랜더링 시킬지 DOM을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능
• 프로젝트 안에 public / index.html <div id="root"></div> 위치에다 새로운 DOM을 만든다
• 사용을 원하는 component 안에서 import ReactDOM from 'react-dom'
• {ReactDOM.createPortal( <component />, document.getElementById( '랜더링 될 위치' ) )}

---

useRef

• 특정 DOM을 선택하는 용도 외에도 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리한다
• useRef 함수는 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당한다
• current 속성은 값을 변경해도 state를 변경할 때 처럼 컴포넌트가 재랜더링되지않는다
• 컴포넌트가 재랜더링될 때도 current 속성의 값이 유실되지 않는다
• const 변수명 = useRef();

ref

• 리액트에 있는 모든 component는 reference element를 가지고 있어서 어떤 component에 ref={변수명} 을 넣어주면 해당 component를 참조하게 된다

---

useReducer

• useState와 마찬가지로 두개의 값이 있는 배열을 반환한다
• 컴포넌트 외부에 상태 업데이트 로직을 담은 rducer 함수 작성
  • 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환
  • function reducer(state, action) {...}
    • state : 현재상태
    • action : 업데이트와 관련된 정보를 가진 객체 (주로 type값을 가진 객체 형태로 사용하며, type 값을 대문자로 구성하는 관습이 있다)
    • return 값 : 컴포넌트가 지닐 새로운 상태 (업데이트 될 값)
• useReducer 함수 사용
  • const [state, dispatch] = useReducer(reducer 함수, 초기 상태, 초기 함수)

// 예시

const initialState = {count: 0, text: ''};  // 초기상태

function reducer(state, action) {
  switch (action.type) {
    case 'PLUS':
      return {count: state.count + 1, text: '+'};
    case 'MINUS':
      return {count: state.count - 1, text: '-'};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'PLUS'})}>+</button>
      <button onClick={() => dispatch({type: 'MINUS'})}>-</button>
      <div>{state.text}를 눌렀습니다.</div>
    </>
  );
}

---

useContext

• React에서만 사용할 수 있다(리액트 내장기능)
• React Context API를 사용하면 컴포넌트 상관없이 전역적으로 특정값을 사용할 수 있다
  • 특정값은 꼭 상태를 가르키지 않아도 된다
  • 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 심지어 DOM 일 수도 있다
• 전역 값이 저장되는 Context, 전역 값을 제공하는 Provider, 그리고 전역 값을 받아 사용하는 Consumer(useContext)로 나뉘어져 있다
• 단점으로 여러 저장소가 존재할 수 있으므로 값을 넘겨줄 때 값이 여러 개라면 Provider를 중첩해서 내려 줘야 하기 때문에 매우 복잡한 설정을 가질수 있다

Context

• 변수에 React.createContext 함수를 담고 인자로 기본값을 준다
• 기본값은 트리 안에서 적절한 Provider를 찾지 못했을 때만 쓰이는 값이다
  • createContext : context 생성
  • const a = React.createContext(defaultValue)

Provider

• context를 만들면 그 안에 Provider라는 컴포넌트가 있는데, 이 컴포넌트를 통해 context의 값을 정할 수 있다
• 값을 정할 때는 value에 값을 설정해 주고 Provider 컴포넌트로 렌더링할 컴포넌트를 감싸준다
  • 생성한콘텍스트.Provider : context에 값을 제공
  • <a.Provider value={context에 제공할 특정값}>

Consumer

• 최종전달 컴포넌트에 변수를 만들고 useContext 함수에 인자로 위에서 만든 변수를 가져온다
  • useContext : context 조회
  • const b = useContext(a)

// 예시
// context.js
import React, { useState } from 'react';

const AuthContext = React.createContext({
  isLoggedIn: false,
  onLogout: () => {},
  onLogin: (email, password) => {},
});

export const AuthContextProvider = props => {
  // ... 코드많은곳 ... 
  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        onLogout: logoutHandler,
        onLogin: loginHandler,
      }}>
      {props.children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

// index.js
import { AuthContextProvider } from './context.js';

ReactDOM.render(
  <AuthContextProvider>
    <App />  // Provider사이에 있는 컴포넌트는 전역 상태에 접근할 수 있다
  </AuthContextProvider>,
  document.getElementById('root')
);

// 최종전달 컴포넌트
import React, { useContext } from 'react';
import AuthContext from './context.js';

const Home = props => {
  const anthCtx = useContext(AuthContext);

  return (
      <Button onClick={anthCtx.onLogout}>Logout</Button>
  );
};