React

VS Code에서 React Hooks 사용법 학습하기(실습)

atomicdev 2024. 10. 11. 15:52
728x90

VS Code에서 React Hooks 사용법 학습하기

React는 웹 애플리케이션을 개발할 때 매우 인기 있는 라이브러리입니다. 이 강의에서는 VS Code를 사용해 React 프로젝트에서 기본적인 Hooks를 어떻게 사용하는지 단계별로 배워볼 것입니다. 초급자도 쉽게 따라할 수 있도록 상세한 예제와 설명을 포함하여 작성되었습니다.

React Hooks 사용법

강의 1: VS Code 설정 및 React 프로젝트 초기화

목표: VS Code 설치 및 기본 개발 환경 설정 후 첫 React 프로젝트 생성

  1. VS Code 설치
    • 공식 사이트에서 VS Code 다운로드 및 설치
    • 기본 확장(Extensions) 설치: ES7+ React/Redux snippets, Prettier, ESLint
  2. Node.js 및 NPM 설치
    • Node.js 설치 (NPM이 포함됨)
    • 설치 후 터미널에서 Node 및 NPM 설치 확인 
      node -v
npm -v
  3. Create React App을 사용해 첫 React 프로젝트 생성
    • VS Code 터미널에서 아래 명령어를 실행하여 새로운 React 프로젝트 생성 
      npx create-react-app my-first-react-app
       
    • 프로젝트 디렉토리로 이동 
      cd my-first-react-app
       
    • VS Code에서 프로젝트 열기 
      code .

 

 

 

 

강의 2: React 기본 Hooks 사용하기

목표: React Hooks의 기초 개념을 이해하고, useState, useEffect를 사용한 간단한 컴포넌트를 만들기

  1. useState 사용법
    • useState는 React에서 상태를 관리하기 위한 Hook입니다.
    • 간단한 상태 변경을 처리하는 카운터 컴포넌트를 작성합니다. 
      import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

       
    • 이 코드를 App.js에 추가하고 브라우저에서 카운터 동작을 확인합니다.
  2. useEffect 사용법
    • useEffect는 컴포넌트가 렌더링되거나 업데이트될 때 특정 동작을 처리하기 위한 Hook입니다.
    • useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 API 데이터를 가져오는 예제 
      import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 빈 배열은 처음 마운트될 때만 실행됨

  return (
    <div>
      <h2>Fetched Data</h2>
      {data ? (
        <div>
          <h3>{data.title}</h3>
          <p>{data.body}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default DataFetcher;
  3. 컴포넌트에서 Hooks 적용 확인
    • VS Code 터미널에서 아래 명령어로 개발 서버를 실행합니다. 
      npm start

       

       
    • 브라우저에서 카운터와 데이터를 불러오는 컴포넌트를 확인합니다.

 

강의 3: React Hook 활용 심화

목표: React의 더 복잡한 상태 관리 및 Context API를 활용한 상태 공유 방법 이해

  1. useContext 사용법
    • useContext는 전역 상태를 관리할 때 유용한 Hook입니다.
    • 테마 변경 기능을 useContext로 구현합니다. 
      import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        테마 변경
      </button>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>현재 테마: {theme}</div>;
}

export default App;
       
  2. useReducer 사용법
    • useReducer는 상태 관리 로직이 복잡한 경우 useState의 대안으로 사용합니다.
    • 리듀서 패턴을 활용해 더 복잡한 상태 업데이트를 처리합니다. 
      import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>카운트: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>증가</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>감소</button>
    </div>
  );
}

export default Counter;

 

 

강의 4: React 프로젝트에서 상태 관리 최적화

목표: React 프로젝트에서 Hooks를 사용하여 최적화된 상태 관리 방법 학습

  1. 성능 최적화
    • 불필요한 재렌더링을 막기 위해 useCallback과 useMemo를 사용하는 방법을 다룹니다. 
      import React, { useState, useCallback } from 'react';

const Button = React.memo(({ handleClick }) => {
  console.log('Button re-rendered');
  return <button onClick={handleClick}>Click me</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <Button handleClick={handleClick} />
    </div>
  );
}

export default App;
     
  2. 최종 프로젝트 코드 통합
    • 각 Hook을 사용하여 상태를 관리하고 성능을 최적화하는 예제를 프로젝트에 통합합니다.

 

강의 5: 리팩토링과 결론

목표: 작성한 코드를 리팩토링하고, React Hooks의 사용을 최종 마무리

  1. Hooks 리팩토링
    • 중복되는 코드와 비효율적인 코드를 제거하고, 각 Hook을 적절히 활용하여 최적화된 React 애플리케이션을 만듭니다.
  2. 결론
    • React Hooks의 기본 개념과 고급 기능까지 다루며, 실제 프로젝트에서 어떻게 적용할 수 있는지 학습합니다.
728x90