React.js 초급 내용 정리

초급 개발자를 위한 React.js 개발 내용 정리

React.js는 사용자 인터페이스를 효율적으로 구축할 수 있는 강력한 JavaScript 라이브러리로, 초급 개발자들에게는 기본 개념부터 체계적으로 배우는 것이 중요합니다. 아래는 초급 개발자를 위한 React.js 개발 지침서를 작성하기 위한 상세한 내용과 구조입니다. 이 가이드는 실습 중심으로 설계되어 있으며, 이해를 돕기 위한 다이어그램과 코드 예제를 포함할 것을 권장합니다.

서론: React.js란 무엇인가?

React.js는 페이스북에서 개발한 JavaScript 라이브러리로, 주로 단일 페이지 애플리케이션(SPA)과 재사용 가능한 UI 구성 요소를 만드는 데 사용됩니다. 주요 장점은 선언적 문법, 가상 DOM을 통한 효율적인 렌더링, 그리고 대규모 커뮤니티 지원입니다. 초급 개발자는 React가 어떻게 UI를 구성 요소로 나누어 관리하는지 이해하는 데 초점을 맞춰야 합니다.

필수 전제 조건

• HTML, CSS, JavaScript의 기본 지식
• ES6 기능(화살표 함수, 구조 분해 할당 등)에 대한 이해

1. 개발 환경 설정

React 프로젝트를 시작하려면 현대적인 도구를 사용하는 것이 중요합니다. Vite는 빠르고 간단한 설정을 제공하므로 초급 개발자에게 적합합니다.

• Node.js와 npm 설치: nodejs.org에서 다운로드 후 node -v와 npm -v로 설치 확인.
• Vite로 프로젝트 생성: 터미널에서 npm create vite@latest my-react-app -- --template react 실행.
• 프로젝트 구조 이해: src/ 디렉토리(소스 코드), App.jsx(주요 구성 요소), index.jsx(진입점), public/ 디렉토리(정적 자산) 등.

다이어그램으로 프로젝트 디렉토리 구조를 시각화하면 초급 개발자가 파일 배치를 쉽게 이해할 수 있습니다.

2. JSX: JavaScript와 HTML의 결합

JSX는 React에서 UI를 정의하는 데 사용되는 문법으로, HTML과 비슷하지만 JavaScript 표현식을 포함할 수 있습니다.

• 작성 방법: 단일 루트 요소가 필요하며, 예: <div><h1>Hello, World!</h1></div>.
• 표현식 삽입: 중괄호 {}로 JavaScript 표현식 삽입, 예: <h1>Hello, {name}!</h1>.
• JSX vs HTML: class 대신 className 사용, 인라인 스타일은 객체로 작성, 예: style={{ color: 'red' }}.

코드 예제:

function Welcome() {
  return <h1>Hello, {name}!</h1>;
}

3. 구성 요소: React의 기본 단위

React 애플리케이션은 구성 요소로 구성되며, 기능형 구성 요소가 현대적인 접근법입니다.

• 기능형 구성 요소: JavaScript 함수로 정의, JSX 반환, 예:
• function Welcome() { return <h1>Welcome to React!</h1>; }
• 클래스 구성 요소 (간단히 다루기): React.Component를 확장, render 메서드 포함.
• 렌더링: 다른 구성 요소에서 가져와 사용, 예: <Welcome />.

구성 요소 트리 다이어그램을 추가하면 부모-자식 관계를 시각적으로 이해할 수 있습니다.

4. Props: 데이터 전달

Props는 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 방법입니다.

• Props 정의: 속성으로 전달, 예: <Welcome name="Alice" />.
• Props 사용: props 객체를 통해 접근, 예:
• function Welcome(props) { return <h1>Hello, {props.name}!</h1>; }
• Prop Types: 선택 사항으로, prop-types 라이브러리로 타입 검사 가능.

5. 상태 관리: useState 훅

상태는 구성 요소 내부에서 변경 가능한 데이터를 관리하는 데 사용됩니다.

• useState 훅 사용: useState로 상태 변수 선언, 예: const [count, setCount] = useState(0);.
• 상태 업데이트: 세터 함수로 업데이트, 예: setCount(count + 1).
• 클래스 구성 요소에서의 상태: this.state와 this.setState 사용 (간단히 다루기).

코드 예제:

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

6. 이벤트 처리

사용자 상호작용을 처리하기 위해 이벤트 핸들러를 정의합니다.

• 이벤트 핸들러: 함수로 정의, 예: const handleClick = () => alert('Clicked!');.
• 공통 이벤트: onClick, onChange, onSubmit 등.
• 예제:
• function Button() { const handleClick = () => alert('Clicked!'); return <button onClick={handleClick}>Click me</button>; }

7. 조건부 렌더링

특정 조건에 따라 UI를 다르게 렌더링합니다.

• if 문 사용: JSX 외부에서 조건 처리.
• 삼항 연산자: {condition ? <ComponentA /> : <ComponentB />}.
• 논리 AND: {condition && <Component />}로 조건에 따라 렌더링.

8. 리스트 렌더링

배열 데이터를 리스트로 렌더링합니다.

• map() 사용: 배열을 요소 리스트로 변환, 예:
• const numbers = [1, 2, 3]; return <ul>{numbers.map(n => <li key={n}>{n}</li>)}</ul>;
• 키의 중요성: 각 항목에 고유 키 제공, React가 변경 사항을 효율적으로 추적.

9. 폼 처리

폼 입력을 관리하고 제출을 처리합니다.

• 제어된 구성 요소: 상태로 폼 요소 관리, 예:
• function Form() { const [value, setValue] = useState(''); const handleChange = (e) => setValue(e.target.value); return <input type="text" value={value} onChange={handleChange} />; }
• 폼 제출 처리: onSubmit 사용, e.preventDefault()로 기본 동작 방지.

10. 상태 공유: 상태 상향 이동

여러 구성 요소가 상태를 공유해야 할 때, 공통 조상으로 상태를 이동시킵니다.

• 상태 상향 이동: 공통 부모 구성 요소에서 상태 관리.
• Props로 전달: 상태와 핸들러를 자식 구성 요소에 전달.

11. 훅 소개

훅은 기능형 구성 요소에서 상태와 부작용을 관리합니다.

• useState: 이미 다룸.
• useEffect: 데이터 가져오기, 구독 등 부작용 처리, 예:
• useEffect(() => { document.title = `You clicked ${count} times`; }, [count]);
• 커스텀 훅: 재사용 가능한 로직, 예: 데이터 가져오기 훅.

12. React Router를 사용한 라우팅

다양한 페이지 간 이동을 관리합니다.

• 설치 및 설정: npm install react-router-dom, BrowserRouter, Route, Link 사용.
• 라우트 정의: 예:
• <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter>
• 페이지 이동: Link 구성 요소 또는 useNavigate 훅 사용.

13. API 호출

외부 데이터 가져오기

• fetch 사용: HTTP 요청, 예:
• useEffect(() => { fetch('https://api.example.com/data') .then(response => response.json()) .then(data => setData(data)); }, []);
• axios 사용: 대안 HTTP 클라이언트, npm install axios로 설치