이번 강의에서는 React의 기본 개념부터 개발 환경 구성, 컴포넌트 작성, 로그인 화면과 페이지 라우팅까지 학습했다.
1. REACT 01 - React와 컴포넌트
React는 사용자 화면을 여러 개의 작은 컴포넌트로 나누어 개발하는 라이브러리이다.
- 컴포넌트는 화면을 구성하는 독립적인 부품이다.
- 잘 분리된 컴포넌트는 여러 화면에서 재사용할 수 있다.
- React에서는 주로 함수를 사용해 컴포넌트를 만든다.
- 컴포넌트가 브라우저 화면에 표시되는 과정을 렌더링이라고 한다.
function Welcome() {
return <h1>Welcome!</h1>;
}
export default Welcome;2. REACT 02 - 개발 환경 구성
React 프로젝트를 실행하려면 Node.js와 npm이 필요하다.
Node.js: 브라우저 밖에서 JavaScript를 실행할 수 있는 환경npm: 프로젝트에서 사용하는 패키지를 설치하고 관리하는 도구- React 프로젝트는 여러 라이브러리와 설정 파일로 구성된다.
index.html은 React 화면이 표시되는 기본 HTML 문서이다.- React가 만든 화면은
index.html내부의 특정 영역에 렌더링된다.
3. REACT 03 - 첫 번째 컴포넌트 만들기
컴포넌트는 별도의 JavaScript 파일로 작성할 수 있다.
import "./Welcome.css";
function Welcome() {
return (
<div className="welcome">
<h1>환영합니다.</h1>
<button>로그인</button>
</div>
);
}
export default Welcome;- JSX를 사용하면 JavaScript 안에서 HTML과 비슷한 문법을 작성할 수 있다.
- CSS 파일을 가져와 컴포넌트에 스타일을 적용할 수 있다.
- 작성한 컴포넌트를 다른 파일에서 불러와 화면에 표시할 수 있다.
- 브라우저와 개발 도구를 이용해 렌더링 결과를 확인한다.
4. REACT 04 - 로그인 화면과 이벤트 처리
아이디와 비밀번호를 입력받는 로그인 화면을 만들고 CSS를 적용했다.
function Login() {
const handleLogin = () => {
// 로그인 처리
};
return (
<div>
<input type="text" placeholder="아이디" />
<input type="password" placeholder="비밀번호" />
<button onClick={handleLogin}>로그인</button>
</div>
);
}onClick을 사용해 버튼 클릭 이벤트를 처리할 수 있다.- 서버에 로그인 정보를 전달할 때는 주로
POST방식을 사용한다. - 요청 데이터는 JSON 형식으로 전달할 수 있다.
- 로그인 결과에 따라 다른 화면으로 이동하도록 구성할 수 있다.
{
"id": "user01",
"password": "1234"
}5. REACT 05 - 페이지 라우팅
라우팅은 URL에 따라 서로 다른 컴포넌트를 보여주는 기능이다.
/ → Welcome 컴포넌트
/login → Login 컴포넌트
/main → Main 컴포넌트- 라우터에 URL과 컴포넌트를 등록한다.
- 페이지 전체를 새로 불러오지 않고 다른 컴포넌트로 이동할 수 있다.
- Welcome 화면에서 Login 화면으로 이동하는 흐름을 구현할 수 있다.
- 화면을 이동하면서 필요한 데이터를 함께 전달할 수도 있다.
- 실제 서비스에서는 라우팅과 서버 통신을 함께 사용하게 된다.
전체 흐름 정리
React 기본 개념
↓
Node.js와 npm 환경 구성
↓
함수형 컴포넌트 작성
↓
JSX와 CSS로 화면 구성
↓
이벤트 및 로그인 요청 처리
↓
라우터를 이용한 페이지 이동이번 강의를 통해 React는 화면을 컴포넌트 단위로 나누고, 필요한 컴포넌트를 조합해 하나의 웹 애플리케이션을 만드는 방식이라는 것을 알게 되었다.
개발자