ReactJS 튜토리얼: 첫 번째 React 앱을 만들기
안녕하세요, 미래의 React 개발자 여러분! ReactJS의 세계로 함께 뛰어들게 되어 기쁩니다. 10년 이상 컴퓨터 과학을 가르쳐온 사람으로서 React는 강력하며, 학습하는 것도 정말 재미있답니다. 그麼, 시작해보겠습니다!
ReactJS는 무엇인가요?
React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. Facebook에서 개발되었으며, 이제 세계에서 가장 인기 있는 프론트엔드 라이브러리 중 하나가 되었습니다. 하지만 그 이름이 무서워서 걱정하지 마세요 - 우리는 단계별로 설명해 나갈게요.
왜 React인가요?
카드 집을 짓는 것을 생각해보세요. 무엇을 바꾸고 싶을 때마다 각 카드를 조심스럽게 조정해야 하죠? React는 마법의 카드처럼, 한 부분을 바꾸면 자동으로 조정되는 카드를 제공해줍니다. 이는 웹 애플리케이션을 구축하고 업데이트하는 것을 훨씬 더 쉽고 빠르게 만들어줍니다.
사전 요구 사항
들어가기 전에 필요한 것들을 확인해보겠습니다:
- HTML과 CSS에 대한 기본 이해
- JavaScript에 대한 친숙함 ( 걱정 말아요, 우리가 가면서复习할게요)
- 텍스트 에디터 (Visual Studio Code를 추천합니다)
- 컴퓨터에 Node.js가 설치되어 있음
첫 번째 React 프로젝트 설정
그麼, 첫 번째 React 프로젝트를 만들어보겠습니다. Create React App 도구를 사용하여 단 한 명령어로 필요한 모든 것을 설정할 수 있습니다.
- 터미널이나 명령 프롬프트를 엽니다.
- 프로젝트를 생성하고 싶은 폴더로 이동합니다.
- 다음 명령어를 실행합니다:
npx create-react-app my-first-react-app이 작업은 몇 분 걸릴 수 있습니다. 완료되면 새로운 프로젝트 폴더로 이동합니다:
cd my-first-react-app이제 앱을 시작해보겠습니다:
npm start이제 새 브라우저 창이 열리고 첫 번째 React 앱이 실행 중이 보일 것입니다. 아직 많지 않지만, 우리는刚刚 시작했으니까요!
프로젝트 구조 이해
Create React App이 우리에게 설정해준 것들을 보겠습니다:
my-first-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg지금 우리에게 중요한 파일들은 src 폴더에 있습니다. App.js는 우리가 대부분 코드를 작성할 곳입니다.
첫 번째 React 컴포넌트
src/App.js를 텍스트 에디터에서 엽니다. 다음과 같은 내용을 보게 될 것입니다:
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;이것이 React 컴포넌트입니다. 혼란스러울 수 있지만, 우리는 단계별로 설명해 나갈게요:
- 우리는 React과 필요한 다른 파일을 가져옵니다
-
App이라는 함수를 정의합니다 - 이 함수는 JSX(JavaScript XML)을 반환합니다 - HTML처럼 보이지만 JavaScript를 사용할 수 있는 특별한 문법
- 마지막으로, 우리는 컴포넌트를 다른 곳에서 사용할 수 있도록 내보냅니다
이제 이 컴포넌트를 우리 것으로 수정해보겠습니다:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
</div>
);
}
export default App;파일을 저장하고 브라우저를 확인해보세요 - 자동으로 업데이트됩니다!
상태 추가하여 인터랙티브하게 만들기
이제 앱을 조금 더 인터랙티브하게 만들기 위해 클릭할 때마다 몇 번이나 클릭되었는지 세는 버튼을 추가해보겠습니다.
App.js의 내용을 다음과 같이 변경합니다:
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
<button onClick={handleClick}>
You've clicked me {count} times
</button>
</div>
);
}
export default App;이를 단계별로 설명해보겠습니다:
- 우리는
useState를 가져와 상태를 컴포넌트에 추가합니다 -
useState(0)를 사용하여 상태 변수count와 이를 업데이트할setCount함수를 생성합니다 -
handleClick함수를 정의하여 카운트를 증가시킵니다 - JSX에서 버튼을 추가하여 클릭 횟수를 표시하고
handleClick을 호출합니다
파일을 저장하고 브라우저를 확인해보세요 - 클릭할 때마다 버튼이 카운트를 업데이트해야 합니다!
새로운 컴포넌트 생성
앱이 커지면서, 우리는 작고 재사용 가능한 컴포넌트로 나누고 싶을 것입니다. 그麼, 카운터를 위한 새로운 컴포넌트를 만들어보겠습니다.
src/Counter.js 파일을 생성하고 다음 코드를 추가합니다:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<button onClick={handleClick}>
You've clicked me {count} times
</button>
</div>
);
}
export default Counter;이제 App.js에서 이 새로운 컴포넌트를 사용해보겠습니다:
import React from 'react';
import './App.css';
import Counter from './Counter';
function App() {
return (
<div className="App">
<h1>Welcome to My First React App!</h1>
<p>I'm excited to learn React!</p>
<Counter />
<Counter />
</div>
);
}
export default App;이제 우리는 페이지에 두 개의 독립된 카운터가 있습니다.
결론
축하합니다! 첫 번째 React 앱을 만들었고, 컴포넌트, 상태, 그리고 재사용 가능한 컴포넌트를 만드는 방법을 배웠습니다. 이제 React 여정의 시작에 불과하지만, 이미 멀리 왔습니다.
기억해 두세요, 코딩을 배우는 것은 새로운 언어를 배우는 것과 같습니다 - 연습과 인내가 필요합니다. 처음에는 이해가 안 될 수 있지만, 계속 실험하고 만들고, 가장 중요한 것은 즐겁게 유지하세요!
다음 강의에서는 React props, 더 복잡한 상태 관리, 그리고 더 큰 애플리케이션을 만드는 방법에 대해 더 깊이 탐구할 것입니다. 그么, 행복하게 코딩하세요!
Credits: Image by storyset