1/20 일일정리 Reach Intro

React?

React는 프론트엔드 개발을 위한 Javascript 오픈소스 라이브러리다.

React의 특징으로는 선언형, 컴포넌트 기반, 범용성을 들 수 있다.

- React는 하나의 페이지를 보여주기 위해 HTML, CSS, Javascript를 나눠서 적기 보다 하나의 파일에 명시적으로 작성할 수 있도록 JSX라는 문법을 활용한 선언형 프로그래밍을 지향한다.

 

- React는 하나의 기능을 구현하기 위해 여러 코드를 하나로 묶은 컴포넌트를 기반으로 개발한다. 컴포넌트로 기능을 구분하면 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중할 수 있고 유지보수나 에러를 찾는것도 쉽다.

 

- React는 어떤 Javascript 프로젝트라도 유연하게 적용이 가능해서 범용성이 넓다.

 

JSX

JSX는 Javascript XML의 줄임말로 React에서 UI를 구성할 때 사용하는 Javascript 확장문법이다.

JSX문법으로 작성된 컴포넌트

JSX로 작성된 파일은 브라우저가 바로 읽지는 못하고 Babel이라는 컴파일러를 통해서 Javascript로 변환한 후 브라우저에게 넘겨주면 브라우저가 파일을 읽고 랜더링한다.

기존에는 DOM요소를 구성할 때 HTML 코드와 Javascript 코드를 넘나들면서 코드를 작성해야 했는데, JSX 문법을 사용하면 한 파일에서 보기 편하게 코드를 작성할 수 있다. 이렇게 구조와 동작에 대한 코드를 한 뭉치로 나타낸 코드셋을 컴포넌트 라고 한다.

 

JSX 활용

- JSX에서 여러 엘리먼트를 작성하는 경우 최상위에 opening 태그와 closing 태그로 감싸주어야 한다.

- 클래스를 사용하고 싶으면 class 가 아니라 className으로 표기해야 한다.

 

- Javascript 표현식을 사용하려면 중괄호로 묶어주어야 한다. 중괄호로 묶지 않으면 일반 텍스트로 인식한다.

 

- Reach 엘리먼트는 대문자로 정의되어야 한다. 소문자로 시작하면 HTML 엘리먼트로 인식한다. 

  대문자로 작성된 JSX 컴포넌트를 사용자 정의 컴포넌트라고 부른다.

 

- 조건부 랜더링에는 if문이 아니라 삼항연산자를 사용해야 한다.

 

- 여러 개의 HTML 엘리먼트를 표시할 때는 map 함수를 사용한다. map 함수를 사용할 때는 반드시 'key' JSX 속성을 넣어야 한다.

 

Component

하나의 기능을 구현하기 위한 여러 종류의 코드 묶음이다. UI 구성의 필수 요소이다.

컴포넌트를 여러개 만들어 조합하면 어플리케이션을 만들 수 있다.

컴포넌트는 DOM과 비슷하게 계층적 구조를 가지고있다.

 

Twittler 만들기

페어와 함께 간단한 twitter 형태의 웹페이지를 React 컴포넌트 연습을 진행하였다.

React 연습