이제 프론트엔드의 기본기라고 할 수 있는 Html, Css, JS 의 기본 개념을 모두 익혔다.
오늘부터는 React를 공부할 것이다.
공부한 책은 "소플의 처음 만난 리액트" 라는 책이다.
1. 리액트 소개
우선 리액트를 사용하기 위해 Node.js를 설치할 것이다.
위 홈페이지에 들어가서 자신의 버전에 맞는 리액트를 설치하면 된다.
나는 20.10.0 버전을 설치하였다.
Node.js 를 설치하면 npm 은 자동으로 같이 설치된다.
또한 VS Code 가 필요한데, 이미 설치되어 있어서 생략하도록 하겠다.
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.
자주 사용되는 기능을 정리해 모아 놓은 것이다.
리액트는 컴포넌트 기반의 구조이다.
리액트는 재사용성이 있다.
리액트 네이티브를 배운다면, 모바일 앱도 개발이 가능하다.
2. 리액트 시작하기
우선 리액트를 웹사이트에 추가하기 위해 간단한 웹사이트를 만들어 보겠다.
title 과 h1 태그만 있는 간단한 html 파일이다.
그리고 style.css 파일을 연결해 주었다.
css에서는 간단하게 h1 태그를 꾸며 주었다.
이제 웹페이지는 준비되었다.
리액트를 추가하려면, 기존 웹사이트 html 파일에 DOM 컨테이너를 추가해야 한다.
두 개의 자바스크립트 파일과 앞으로 만들게 될 코드도 미리 넣어 주었다.
MyButton.js 파일은 다음과 같이 작성해 주었다.
버튼을 눌렀더니 'Clicked!' 로 버튼이 변했다.
또한 터미널에서 npx create-react-app 앱이름 을 입력하여 쉽게 리액트 어플리케이션을 만들 수 있다.
3. JSX 소개
JSX 은 자바스크립트의 확장 문법이다.
const element = <h1>Hello, World!</h1>;위 코드는 간단한 JSX 의 예문이다.
이 코드는 자바스크립트 코드와 HTML 코드가 결합되어 있는 코드이다.
npx create-react-app 으로 만든 my-app을 vs code로 열어서 Book.jsx 파일을 생성해 주었다.
그리고 Book을 이용한 Library.jsx 파일도 생성해 주었다.
그리고 마지막으로 src 에 있는 index.js 파일을 수정해 주었다.
그리고 터미널에 npm start 명령어를 입력해주면 웹브라우저의 창이 열린다.
위와 같이 잘 나왔다.
4. 엘리먼트 렌더링
엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이다.
리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.
리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.
엘리먼트는 변하지 않는 성질, 즉 불변성을 갖고 있다.
그래서 화면의 엘리먼트를 변경하기 위해서는 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기하면 된다.
엘리먼트를 이용해 시계를 만들어 보도록 하겠다.
우선 Clock.jsx 파일을 생성해 주었다.
그리고 시계가 1초마다 변경될 수 있도록 index.js 파일도 수정해 주었다.
setInterval 함수를 사용하였다.
5. 컴포넌트와 Props
리액트는 컴포넌트 기반의 구조이다.
리액트 컴포넌트가 해주는 역할을 어떠한 속성들을 입력으로 받아서 그에 맞는 엘리먼트를 생성하여 리턴해주는 것이다.
props 는 리액트 컴포넌트의 속성이다.
props 는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체이다.
모든 리액트 컴포넌트는 그들의 props에 관해서는 Pure 함수 같은 역할을 해야 한다.
모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줘야 한다.
댓글 컴포넌트를 만들어 보겠다.
먼저 Comment.jsx 파일을 생성해 주었다.
그리고 CommentList.jsx 파일을 생성했다.
마지막으로 index.js 파일을 수정해 주었다.
