create-react-app으로 생성된 프로젝트의 폴더 구조는 다음과 같다:
- node_modules: 프로젝트에 필요한 모든 Node.js 모듈을 포함한다.
npm install을 통해 설치된 모듈들이 이 디렉토리에 위치한다. - public: 정적 파일들을 보관하는 곳이다. 예를 들어,
index.html, 로고 이미지, favicon 등이 이곳에 위치한다. - src: 애플리케이션의 주요 소스 코드가 들어있다. 여기에는 React 컴포넌트, CSS 스타일 시트, JavaScript 모듈 등이 포함된다.
- package.json: 프로젝트의 메타데이터와 의존성(dependencies) 목록이 정의된 파일이다. 또한, 스크립트와 프로젝트 설정도 이 파일에서 관리된다.
- .gitignore: Git 버전 관리 시 무시할 파일 목록을 정의한다.
- README.md: 프로젝트에 대한 정보를 제공하는 마크다운 파일이다.
이러한 폴더 구조는 React 개발에서 일반적으로 사용되는 구조이며, 다음과 같은 이유로 널리 채택되고 있다:
- 모듈성:
src폴더 안에 있는 각 파일과 폴더는 프로젝트의 다른 부분과 독립적으로 존재할 수 있다. 이는 코드의 관리와 유지 보수를 용이하게 한다. - 유지 관리의 용이성: 프로젝트의 크기가 커질수록, 코드를 체계적으로 구성하는 것이 중요하다. 이 폴더 구조는 프로젝트의 확장성을 고려한 것이다.
- 개발자 커뮤니티의 지원:
create-react-app은 React 커뮤니티에서 널리 사용되고 지원되는 툴이기 때문에, 이 구조를 따르면 다른 개발자들과의 협업이나 정보 공유가 용이하다.
각 디렉토리에 파일을 배치하는 방법에는 몇 가지 일반적인 규칙이 있다:
- node_modules: 이 디렉토리는 직접 수정하지 않는다. npm을 통해 모듈을 설치하거나 업데이트할 때 자동으로 관리된다.
- public: 애플리케이션의 HTML 진입점(
index.html)과 공개적으로 접근해야 하는 자산(예: 이미지, 아이콘)을 이곳에 둔다. - src: 여기에는 애플리케이션의 주요 로직과 컴포넌트, 스타일, 테스트 파일들을 포함한다. 일반적으로, 컴포넌트는 별도의 파일로 분리하고, 관련 스타일 시트는 해당 컴포넌트와 같은 폴더에 위치시킨다.
React 실제 코드 예시
이 섹션에서는 React의 주요 개념을 보여주는 간단한 코드 예시들을 살펴볼 것이다. 이를 통해 실제 애플리케이션 개발에 필요한 기초적인 이해를 얻을 수 있다.
함수형 컴포넌트와 Hooks 사용 예시
함수형 컴포넌트는 상태 관리를 위해 Hooks를 사용한다. 아래는 useState와 useEffect를 사용한 예시이다.
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
// useState를 사용하여 로컬 상태 관리
const [count, setCount] = useState(0);
// useEffect를 사용하여 컴포넌트 업데이트 시 수행할 작업 정의
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}클래스형 컴포넌트 예시
클래스형 컴포넌트는 this.state와 this.setState를 사용하여 상태를 관리한다.
import React, { Component } from 'react';
class ExampleComponent extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}React에서 중요한 것
- 컴포넌트 분리: 각 컴포넌트는 하나의 기능만 수행해야 하며, 가능한 작게 유지하는 것이 좋다. 이렇게 하면 코드의 재사용성과 유지 보수가 용이해진다.
- 명확한 상태 관리: 상태는 가능한 한 최상위 컴포넌트에서 관리하고, 필요한 데이터만 자식 컴포넌트에 전달하는 것이 좋다.
- 함수형 컴포넌트와 Hooks 사용: React 팀은 함수형 컴포넌트와 Hooks 사용을 권장한다. 이는 코드를 더 간결하고 이해하기 쉽게 만들어 준다.
정리!
React는 유연하고 강력한 프론트엔드 라이브러리이며, 다양한 방식으로 애플리케이션을 구축할 수 있게 해준다. 위에서 언급한 기본적인 개념과 모범 사례를 잘 이해하고 활용한다면, 효과적이고 유지 보수가 용이한 웹 애플리케이션을 개발할 수 있을 것이다.
