9/28 회고

< 목차 >

1. 회고

---

1. 회고

오늘은 코드스테이츠에서 리액트를 학습하는 첫날이였다. 본격적으로 공부하기 앞서서 리액트 기초 개념을 통해 리액트가 무엇인지 알게 되었다. 이번 챕터에서는 자바스크립트 확장 문법 jsx와 리액트의 핵심 Component에 대해 학습을 해보았다. 일전에 jsx에 대하여 블로깅을 하였기 때문에 자세한 내용은 서술하지 않으나 요약을 해보자면...

React란?

• 프론트엔드 개발을 위한 JS 오픈소스 라이브러리

React의 특징

1. 선언형

• 리액트는 한 페이지를 보여주기 위해 3가지(HTML,JS,CSS)로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성 할 수 있게 JSX를 활용해서 선언형 프로그래밍을 지향한다.

2. 컴포넌트 기반

• React는 하나의 기능 구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
  컴포넌트로 분리하면 서로 독립적이고 “재사용” 가능하기 때문에, 기능 자체에 집중하여 개발이 가능하다 -> 유지보수나 유닛테스트에 좋음

3. 범용성

• React는 JS 프로젝트 어디에든 유연성있게 적용된다.
  Facebook에서 관리되어 안정적, 가장 유명하기도 하고 네이티브로 모바일 개발도 가능하다.

React의 JSX문법의 규칙

• 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야한다.

• Class지정은 className으로 지정해야한다.

• JS를 쓰고자 한다면 {} 중괄호로 선언해야한다.

• 컨포넌트는 대문자로 해야한다.

• 조건부 렌더링은 if가 아니라 삼항연산자를 사용해야한다.
  (조건 ? true값 : false값)

• 여러개의 HTML Element를 표시할때는 map을 사용한다.
  (map을 사용할때는 반드시 ‘key’ JSX 속성을 넣어야한다.)

• key속성의 위치는 map 메서드 내부에 있는 엘리먼트, 첫 엘리먼트에 넣어야한다.