React #1

💡 React 생성

1. Node.js install
2. npm / yarn install
3. IDE install (visual studio code)
4. Git install
5. 터미널에 create-react-app 명령어로 프로젝트 생성

npx create-react-app 프로젝트명

---

🤔 useState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다.

만약 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 useState를 사용하면 된다.

사용 예시

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{count}</b> 입니다.
      </p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
};

---

🤔 useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.

사용 예시

const UnmountTest = () => {
    useEffect(() => {
        console.log('Mount!');

        return () => {
            // Unmount 시점에 실행되게 함
            console.log('Unmount!');
        };
    }, []);
    return <div>Unmount Testing Component</div>;
};

주로, 마운트 시에 하는 작업들은 다음과 같은 사항들이 있다.

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청 (REST API 등)
• 라이브러리 사용 (D3, Video.js 등...)
• setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

언마운트 시에 하는 작업들은 다음과 같은 사항이 있다.

• setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
• 라이브러리 인스턴스 제거

---

🤔 useContext

일반적인 React 데이터는 props를 통해서 부모에서 자식에게 전달 되지만, 어플리케이션 안의 여러 컴포넌트들에게 props를 전달해줘야 하는 경우 context를 이용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게 해주는 것이다.

데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다

createContext
-context 객체 생성
Provider
-생성한 context를 하위 컴포넌트에게 전달
Consumer
-context의 변화를 감시

const ThemeContext = React.createContext();

function App() {
  const theme = /* some theme data */;
  return (
    <ThemeContext.Provider value={theme}>
      <Header />
      <MainContent />
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = useContext(ThemeContext);
  // Header 컴포넌트에서 theme 사용
}

function MainContent() {
  const theme = useContext(ThemeContext);
  // MainContent 컴포넌트에서 theme 사용
}