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

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의 기본 개념과 고급 기능까지 다루며, 실제 프로젝트에서 어떻게 적용할 수 있는지 학습합니다.