코드스테이츠 부트캠프

React 기초

als982001 2023. 1. 25. 11:47

1. React란

 React란 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리. React는 선언형, 컴포넌트 기반, 범용성이라는 3가지 특징을 가진다.

  1. 선언형: 기존에 했던 것처럼 HTML, CSS, JS로 나눠 적는 것 대신, 하나의 파일에 명시적으로 작성하는 것(선언형 프로그래밍)을 지향한다.
  2. 컴포넌트 기반(Component-Based): 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 이를 통해 서로 독립적이고 재사용이 가능해져 기능 자체에 집중하여 개발할 수 있다. (컴포넌트: 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋)
  3. 범용성(Learn Once, Write Anywhere): JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.

2. JSX (JavaScript XML)

 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이를 이용해 React 엘리먼트를 만드는 것이 가능하다. 이를 이용해 JavaScript 만으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있다. JSX를 이용하지 않아도  React 컴포넌트를 만들 수 있지만, 그 경우 코드가 복잡해지고 가독성이 떨어지기 때문에 JSX를 이용한다. 

 

2-1. JSX 문법

  1. JSX에서 여러 엘리먼트를 작성하기 위해서는 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
  2. class 속성을 지정하기 위해서는 className으로 표기해야 한다.
  3. JavaScript를 이용하기 위햐서는 중괄호를 이용해야 한다.
  4. 사용자 정의 컴포넌트는 대문자로 시작해야 한다. 
  5. 조건부 렌더링에서는 삼항 연산자를 이용한다. 
  6. 여러 개의 HTML 엘리먼트를 표시하기 위해서는 map() 함수를 이용한다 이 때, 반드시 key 속성을 넣어야 한다. 

3. Create React App 시작 명령어

npx create-react-app@latest 폴더이름