-
🧑🏻💻 React는 무엇인가
- Javascript 라이브러리로 Github 10만개가 넘는 별점을 가진 인기 있는 라이브러리중 하나
- React는 프레임워크가 아니다 ❌
- Facebook이 만든 오픈소스 프로젝트
- 프런트엔드에서 사용자 인터페이스(UI)를 구축하는데 사용
- MVC 애플리케이션(Model-View-Controller)의 뷰 계층
⭐ React에서 가장 중요한 측면
- 사용자 인터페이스를 빠르고 효율적으로 구축하기 위해 사용자 정의 및 재사용 가능한 HTML 요소인 컴포넌트를 만들 수 있다.
state와props를 사용하여 데이터 저장 및 처리 방식을 간소화
⚙️ 설정 및 설치
📌 React를 설정하는 2가지 방법
- 정적 HTML
- React 앱 만들기
1️⃣ 정적 HTML
jQuery와 같은 라이브러리를 사용한적 있다면 익숙하고 이해하기 쉽다.
Webpack, Babel, Node.js에 익숙하지 않다면 시작하기 가장 쉬운 방법
📂 기본 파일 - index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // React code will go here </script> </body> </html>- React, React DOM, Babel 세가지 CDN을 로드
React React 최상위 API React DOM DOM 관련 메서드 추가 Babel 오래된 브라우저에서 ES6+를 사용할 수 있게 해주는 Javascript 컴파일러 💡 앱의 시작점은 root div
- 관례에 따라 이름이 지정
- Babel을 사용하려면 필수적인
text/babel스크립트 유형도 확인할 수 있다.
📖 index.html
class App extends React.Component { render() { return <h1>Hello world!</h1> } }render()
- 클래스 구성 요소에 필요한 유일한 메서드인 DOM 노드를 렌더링하는데 사용되는 메서드를 추가
- return 안에 간단한 HTML 요소처럼 보이는 것을 넣는다
- 문자열을 반환하지 않으므로 요소 주변의 따옴표를 사용하지 않는다.
- 이를 JSX라고 한다.
🤖 React DOM 메서드를 사용해 만든 APP 클래스를 HTML의 root div에 render()을 통해 렌더링
ReactDOM.render(<App />, document.getElementById('root'))✋ 최종 index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello React!</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> class App extends React.Component { render() { return <h1>Hello world!</h1> } } ReactDOM.render(<App />, document.getElementById('root')) </script> </body> </html>🖥️ 결과
2️⃣ React 앱 만들기
위 방법에서는 Javascript 라이브러리를 정적 HTML 페이지에 로드하고 React와 Babel을 바로 렌더링하는 것은 비효율적이고 유지관리가 어렵다.
Facebook은 React 앱을 구축하기 위해 필요한 모든 것을 미리 구성한 환경인
Create React App을 만들었고 이것은 아래와 같은 역할을 하게 된다.- 라이브 개발 서버를 만든다.
- 웹팩을 이용해 React, JSX, ES6를 자동으로 컴파일한다.
- CSS 파일을 자동으로 프리픽스하고 ESLint를 사용해 코드의 오류를 테스트하고 경고한다.
📖 라이브 개발 서버
- 개발 중에 코드를 수정하면 웹 브라우저가 자동으로 새로고침되어 변경 사항을 바로 확인할 수 있는 서버
- 즉, 개발자가 코드를 바꿀 때마다 새로고침하지 않아도 되고 실시간으로 결과 확인 가능
⚙️ create-react-app 설정
프로젝트가 실행될 위치에서 하나의 디렉토리 위에 있는 터미널에서 다음 코드를 실행
& npx create-react-app react-tutorial ------ beomsic@-ui-MacBookPro react % npx create-react-app react-tutorial Need to install the following packages: create-react-app@5.1.0 Ok to proceed? (y) y설치가 완료되면 새로 생성되는 디렉토리로 이동하여 프로젝트 시작
& cd react-tutorial && npm start- 새 React 앱과 함께 localhost:3000에 새 창이 나타남.
react-tutorial/ ├── node_modules/ ├── public/ │ ├── index.html │ └── manifest.json ├── src/ │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ └── index.js ├── .gitignore ├── package-lock.json ├── package.json └── README.md📂 /public 에서 중요한 파일은 index.html 이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>- 이전의 static의 index.html 파일과 유사
- 하지만 이번에는 라이브러리나 스크립트가 로드되지 않는다.
- 여기서 <div id="root"> </div> 이 부분이 리액트 앱이 실제로 렌더링되는 자리
- ReactDOM이 이 div를 찾아서 우리가 만든 컴포넌트(App 등)를 여기에 그려줌
📂 /src 디렉토리에는 모든 REACT 코드가 포함
- 우리가 작성하는 대부분의 자바스크립트, 컴포넌트, CSS 파일들이 여기에 존재
🔖 index.js
import React, { Component } from "react"; import { createRoot } from "react-dom/client"; // import ReactDOM from "react-dom"; import "./index.css"; class App extends Component { render() { return ( <div className="App"> <h1>Hello, React!</h1> </div> ); } } const container = document.getElementById("root"); if (container) { const root = createRoot(container); root.render(<App />); }👀 React Developer Tools
React 개발자 도구라는 확장 프로그램이 있어 React로 작업할 때 훨씬 유용
설치 후 DevTools를 열면 React 탭이 표시
📖 JSX: Javascript + XML
💡 리액트 코드에서 HTML처럼 보이는 것을 사용하고 있지만 이건 HTML이 아닌 JavaScript XML의 약자인 JSX이다.
JSX를 사용하면 HTML처럼 보이는 태그를 작성할 수 있고 XML과 유사한 태그를 직접 생성하여 사용할 수도 있다.
🖥️ JSX
const heading = <h1 className="site-heading">Hello, React</h1>React를 작성할 때 JSX를 사용하는 것은 필수가 아님.
- 태그, 속성을 포함하는 객체, 구성 요소의 자식 등을 가져와 렌더링하는 createElement 을 사용할 수 있다.
🖥️ JSX를 사용하지 않은 경우
- 아래 코드는 위의 JSX와 동일한 출력
const heading = React.createElement('h1', { className: 'site-heading' }, 'Hello, React!')📖 JSX 특징
JSX는 HTML이 아닌 Javascript에 더 가깝기 때문에 아래 차이점을 주목해야 한다.
1️⃣ class 는 Javascript에서 예약된 키워드이기 때문에 CSS 클래스를 추가할 때 class 대신 className이 사용된다.
2️⃣ JSX의 프로퍼티와 메서드는 camelCase 이다.
- ex: HTML의 onclick은 JSX에서 onClick
3️⃣ 자체 닫는 태그(Self-closing tags)는 반드시 슬래시로 닫아야 함
- ex:
- HTML에서는
이나가 허용되지만 JSX에서는 반드시
또는처럼 작성해야 함
4️⃣ JavaScript 표현식은 중괄호({}) 안에 포함
- JSX 내부에 JavaScript 변수, 함수 호출, 객체 속성 등 동적인 값을 삽입하려면 반드시 중괄호({}) 안에 감싸야 한다.
const name = 'Tania' const heading = <h1>Hello, {name}</h1>- JSX는 정적인 마크업과 동적인 JavaScript 로직을 분리하는 경계를 제공
- 중괄호는 "지금부터는 JavaScript 코드를 실행해야 한다"는 것을 React에게 알려주는 역할
💡 JSX는 바닐라 JavaScript에서 많은 요소를 생성하고 추가하는 것보다 작성하고 이해하기 쉽다.
- 사람들이 React를 매우 좋아하는 이유 중 하나
🤖 Components
React의 거의 모든 Component는 클래스 Component일 수도 있고 간단한 Component일 수도 있다.
- 대부분의 React 앱에는 작은 구성 component들이 많고 모든 것이 메인 App component에 로드된다.
🖥️ index.js
import React, { Component } from "react"; import { createRoot } from "react-dom/client"; import App from "./App"; import "./index.css"; const container = document.getElementById("root"); if (container) { const root = createRoot(container); root.render(<App />); }🖥️ App.js
import React, { Component } from 'react' class App extends Component { render() { return ( <div className="App"> <h1>Hello, React!</h1> </div> ) } } export default AppApp component를 export 하여 내보내고 index.js에 로드
- component를 따로 파일로 분리하는 것은 필수는 아니지만 애플리케이션을 유지보수하고 다루기 쉽기하기 위해서 분리하는게 좋다.
📌 Class Components
🧩 src/Table.js
import React, { Component } from 'react' class Table extends Component { render() { return ( <table> <thead> <tr> <th>Name</th> <th>Job</th> </tr> </thead> <tbody> <tr> <td>Charlie</td> <td>Janitor</td> </tr> <tr> <td>Mac</td> <td>Bouncer</td> </tr> <tr> <td>Dee</td> <td>Aspiring actress</td> </tr> <tr> <td>Dennis</td> <td>Bartender</td> </tr> </tbody> </table> ) } } export default Table- 커스텀 클래스 컴포넌트를 대문자로 사용해 일반 HTML 요소와 차별화
- App.js 에서 이 Table을 가져와 로드할 수 있다.
🧩 src/App.js
import React, { Component } from 'react' import Table from './Table' class App extends Component { render() { return ( <div className="container"> <Table /> </div> ) } } export default App
📌 Simple Components
React의 다른 유형의 구성요소는 함수와 같은 simple component 이다.
- 이 컴포넌트는 class 키워드를 사용하지 않는다.
🧩 src/Table.js
import { Component } from "react"; const TableHeader = () => { return ( <thead> <tr> <th>Name</th> <th>Job</th> </tr> </thead> ); }; const TableBody = () => { return ( <tbody> <tr> <td>Charlie</td> <td>Janitor</td> </tr> <tr> <td>Mac</td> <td>Bouncer</td> </tr> <tr> <td>Dee</td> <td>Aspiring actress</td> </tr> <tr> <td>Dennis</td> <td>Bartender</td> </tr> </tbody> ); }; class Table extends Component { render() { return ( <table> <TableHeader /> <TableBody /> </table> ); } } export default Table;- 컴포넌트는 다른 컴포넌트 안에서 태그처럼 사용 가능
- (<TableHeader />, <TableBody />).
- 함수 컴포넌트와 클래스 컴포넌트를 섞어서 쓸 수 있음.
🆚 simple(함수) 컴포넌트 vs 클래스 컴포넌트
🤖 함수 컴포넌트
- 자바스크립트 함수(화살표 함수)
- 문법이 간단하고 읽기 쉬움.
const SimpleComponent = () => { return <div>Example</div>; } // or const SimpleComponent = () => <div>Example</div>;🤖 클래스 컴포넌트
- Component를 상속하고
- render() 메서드를 반드시 가짐.
import React, { Component } from 'react'; class ClassComponent extends Component { render() { return <div>Example</div>; } }💡 정리
- 클래스는 render() 필요, 라이프사이클 메서드 사용 가능
- 함수 컴포넌트는 간결, React Hooks(useState, useEffect)를 쓰면 상태/라이프사이클도 다룰 수 있음
📔 Props
위 Table 컴포넌트를 보면 데이터가 하드코딩이 되어 있다.
React의 가장 큰 장점중 하나는 데이터를 처리하는 방식이다.
- props
- state
먼저 props 을 통해서 데이터를 다루는 방법에 대해서 확인을 해보자.
🧩 src/App.js
class App extends Component { render() { const characters = [ { name: "Charlie", job: "Janitor", }, { name: "Mac", job: "Bouncer", }, { name: "Dee", job: "Aspring actress", }, { name: "Dennis", job: "Bartender", }, ]; return ( <div className="container"> <Table characterData={characters} /> </div> ); } }🧩 src/Table.js
import { Component } from "react"; const TableHeader = () => { return ( <thead> <tr> <th>Name</th> <th>Job</th> </tr> </thead> ); }; const TableBody = (props) => { const rows = props.characterData.map((row, index) => { return ( <tr key={index}> <td>{row.name}</td> <td>{row.job}</td> </tr> ); }); return <tbody>{rows}</tbody>; }; class Table extends Component { render() { const { characterData } = this.props; return ( <table> <TableHeader /> <TableBody characterData={characterData} /> </table> ); } } export default Table;- 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법.
- 전달 시 JSX에서 속성처럼 사용
- 자식은 this.props(클래스) 또는 함수 파라미터 props(함수 컴포넌트)로 접근
- 읽기 전용(read-only): 자식은 전달받은 props를 직접 수정하면 안 됨. (데이터를 바꾸려면 부모가 함수 형태로 조작하거나 컴포넌트의 state 사용)
- 테이블 행에 key 인덱스를 추가
- React에서 목록을 만들 때에는 항상 key를 사용해야 한다.
- 각 목록 항목을 식별하는데 필요
👾 가상 DOM(Virtual DOM)
- React는 실제 DOM과 별개로 가볍고 효율적인 메모리 상의 트리(가상 DOM) 를 유지.
- 상태나 props 변경 시 가상 DOM에서 변경된 부분만 계산(diff)하고 실제 DOM에 최소한의 업데이트만 적용 → 성능 향상.
- React DevTools로 컴포넌트 트리와 props/state를 확인할 수 있음.
✅ State
위에서는 문자 data를 배열에 저장하여 props로 전달해주고 있다.
만약 배열에서 아이템을 삭제하려면 어떻게 해야할까 ❓
💡props 를 사용하면 one way data flow가 가능하지만 state를 사용하면 component의 private한 데이터를 업데이트할 수 있다.
- ex: 구매를 확인하기 전에 장바구니에서 항목을 추가하거나 제거하는 등 데이터베이스에 추가하지 않고도 저장하고 수정해야 하는 모든 데이터를 상태라고 생각할 수 있다.
📖 상태 객체 만들기
- 객체에는 상태에 저장하려는 모든 항목에 대한 속성이 포함
🧩 src/App.js
class App extends Component { state = { characters: [ { name: "Charlie", job: "Janitor", }, { name: "Mac", job: "Bouncer", }, { name: "Dee", job: "Aspring actress", }, { name: "Dennis", job: "Bartender", }, ] } }- 이전에 만들었던 캐릭터 배열을 state.characters 로 이동
- 데이터는 이제 state에 포함
❌ 테이블에서 character 를 제거하는 것을 원하기 때문에 App class에 character를 제거하는 함수를 만들어서 처리
🔍 이때, 상태를 검색하기 위해서는 ES6 메서드 방식을 이용하여 state.characters 를 가져온다.
🔄 상태를 업데이트를 하기 위해서는 this.setState() 를 사용
removeCharacter = (index) => { const { characters } = this.state this.setState({ characters: characters.filter((character, i) => { return i !== index }), }) }- filter 는 변경하지 않고 새로운 배열을 만드는 방법으로 javascript에서 배열을 수정하는데 선호된다.
- 배열의 모든 인덱스를 비교해 테스트하고 통과된 것을 제외한 모든 것들을 반환
removeCharacter 함수를 component에 전달
- prop 로 Table에 전달
🧩 src/App.js
import React, { Component } from "react"; import Table from "./Table"; class App extends Component { state = { characters: [ { name: "Charlie", job: "Janitor", }, { name: "Mac", job: "Bouncer", }, { name: "Dee", job: "Aspring actress", }, { name: "Dennis", job: "Bartender", }, ], }; removeCharacter = (index) => { const { characters } = this.state; this.setState({ characters: characters.filter((character, i) => { return i !== index; }), }); }; render() { const { characters } = this.state; return ( <div className="container"> <Table characterData={characters} removeCharacter={this.removeCharacter} /> </div> ); } } export default App;🧩 src/Table.js
const TableHeader = () => { return ( <thead> <tr> <th>Name</th> <th>Job</th> </tr> </thead> ); }; const TableBody = (props) => { const rows = props.characterData.map((row, index) => { return ( <tr key={index}> <td>{row.name}</td> <td>{row.job}</td> <td> <button onClick={() => props.removeCharacter(index)}>Delete</button> </td> </tr> ); }); return <tbody>{rows}</tbody>; }; const Table = (props) => { const { characterData, removeCharacter } = props; return ( <table> <TableHeader /> <TableBody characterData={characterData} removeCharacter={removeCharacter} /> </table> ); }; export default Table;🖥️ 결과
🆚 props와 state의 차이
구분 props state 정의 부모 → 자식에게 전달되는 읽기 전용 데이터 컴포넌트 내부에서 관리하는 변경 가능한 데이터 변경 가능 여부 ❌ (읽기 전용, 변경 불가) ✅ this.setState() 또는 useState()로 변경 가능 누가 관리? 부모 컴포넌트 자신(해당 컴포넌트) 역할 외부에서 전달된 값 표시 내부 동작이나 사용자 입력 결과 저장 ↗️ Submitting Form Data
데이터를 state 에 저장해놓은 상태에서 이제 해당 데이터들을 제거할 수 있게 했다.
그러면 이제 데이터를 state에 추가하기 위해서는 어떻게 해야할까?
먼저 state.characters 에 하드코딩으로 저장한 데이터를 삭제한 후 Form 을 활용해서 데이터를 추가해보자.
class App extends Component { state = { characters: [], }; }🚙 Form 컴포넌트 생성
📍 src/Form.js
import React, { Component } from 'react' class Form extends Component { initialState = { name: '', job: '', } state = this.initialState }- Form의 초기 상태를 빈 속성을 가진 객체로 설정한 후 해당 객체를 this.state 으로 할당
🎯 해당 Form의 목표
- form에서 필드가 변경될 때마다 form의 상태를 업데이트
- form 이 제출이되면 데이터가 App의 state로 전달되어 Table이 업데이트
1️⃣ 입력에서 변경이 생길때 실행되는 함수
- 이벤트가 전달되어 입력의 이름(key)와 값을 통해 Form 상태을 설정
handleChange = (event) => { const { name, value } = event.target this.setState({ [name]: value, }) }render() { const { name, job } = this.state; return ( <form> <label htmlFor="name">Name</label> <input type="text" name="name" id="name" value={name} onChange={this.handleChange} /> <label htmlFor="job">Job</label> <input type="text" name="job" id="job" value={job} onChange={this.handleChange} /> </form> ); } export default Form;- state에서 필요한 두 속성(name, job)을 가져와 각 속성에 맞는 값으로 할당하도록 한다.
- input의 onChange에 handleChange 메서드를 추가해 값이 변경될 때 값으로 할당
- 입력한 값으로 state가 변경되는 것을 확인해볼 수 있다.
2️⃣ Form을 제출하고 Table 데이터 업데이트
📍 src/App.js
handleSubmit = (character) => { this.setState({ characters: [...this.state.characters, character] }) }- App의 this.state.characters 를 가져와 새로운 character 를 추가해 state를 업데이트 하는 함수 추가
위에서 만든 제출 메서드를 Form의 매개변수로 전달
<Form handleSubmit={this.handleSubmit} />📍 src/Form.js
submitForm = () => { this.props.handleSubmit(this.state) this.setState(this.initialState) }- Form에서 전달받은 메서드를 호출하는 메서드를 또 만들고 handleSubmit의 character 매개변수로 form의 state를 전달
📍 src/Form.js
<input type="button" value="Submit" onClick={this.submitForm} />- 제출 버튼을 만들어 Form을 제출
🌠 Pulling in API Data
React의 일반적인 사용법중 하나는 API를 통해 데이터를 가져오는 것이다.
🧩 위키피디아 API를 이용해서 데이터 가져오는 예시
import React, { Component } from 'react' class App extends Component { state = { data: [], } componentDidMount() { const url = 'https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*' fetch(url) .then((result) => result.json()) .then((result) => { this.setState({ data: result, }) }) } render() { const { data } = this.state const result = data.map((entry, index) => { return <li key={index}>{entry}</li> }) return <ul>{result}</ul> } } export default App📖 componentDidMount
- React 생명주기 메서드
🔄 리액트 생명주기(lifecycle)
생명주기(Lifecycle) “컴포넌트가 생성 - 화면에 렌더링 - 업데이트 - 사라질 때까지의 과정”
React는 이 생명주기의 각 시점마다 특정 메서드를 자동으로 호출해준다.
- 이런 메서드들을 라이프사이클 메서드(Lifecycle Methods) 라고 한다.
📖 컴포넌트의 생명주기 단계
리액트 클래스형 컴포넌트는 보통 세 가지 주요 단계로 나뉜다.
단계 설명 대표 메서드 Mounting (마운트) 컴포넌트가 처음 생성되어 DOM에 추가되는 시점 constructor() → render() → componentDidMount() Updating (업데이트) props나 state가 변경되어 화면이 다시 렌더링되는 시점 render() → componentDidUpdate() Unmounting (언마운트) 컴포넌트가 DOM에서 제거되는 시점 componentWillUnmount() 📖 componentDidMount()
componentDidMount()는 컴포넌트가 화면에 처음 렌더링된 직후에 자동으로 호출되는 메서드
“컴포넌트가 실제로 DOM에 붙은 다음 실행되는 메서드”
✅ 중요한 이유
- API 요청이나 외부 데이터 fetch, 타이머나 이벤트 등록
위 같은 작업들은 DOM이 실제로 존재해야 가능하기 때문
따라서 React에서는 데이터를 불러올 때는 무조건 componentDidMount() 안에서 처리하는 것이 원칙
'FE > React' 카테고리의 다른 글
React의 State 업데이트 큐 (0) 2025.10.23 UI 표현하기 (0) 2025.10.23