DAY 29 <REACT>

REACT

JSX

JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 (확장한) 문법이다.
리액트에서 필수는 아니지만 대부분 HTML을 사용하지 않고 JSX를 사용한다.

• JSX안에 들어가는 자바스크립트는 변수 안에서 정의 하고 변수명을 중괄호를 감싼 형태로 표현한다.
  const javascript = "javascript"
{javasctipt}
• class를 사용하고 싶으면 className이라고 사용하고 어트리뷰트는 이름 대신 camelCase(프로퍼티 명명 규칙)를 사용한다. (HTML과 겹치지 않게 사용하기 위해서 라고 한다.)
• HTML 에서는 닫지 않는 태그도 항상 클로징 태그를 써줘야고 어떤 태그다로 self-closing이 가능하다. <div/>
• 한개의 element만 반환할 수 있다. (자식 태그를 포함할 수 있다. => 형제노드를 작성할 수 없다.) (div로 감싸거나 빈태그로 감싸줄 수 있다. <> </>)
• JSX안에 들어가는 자바스크립트는 변수 안에서 정의 하고 리턴에서 변수명을 중괄호를 감싼 형태로 표현한다.{javasctipt}

리액트에서 화면에 보여지는 것을 렌더링이라고 하는데 컴포넌트가 현재의 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하여 화면에 보여준다.

COMPONENT

리액트의 컴포넌트는 UI를 재사용 가능한 개별적인 여러 조각으로 나누는 것을 얘기한다.
화면에서 레아이웃 구조, DOM 객체 등의 위치를 표현할때 사용되고 babel이라는 라이브러리가 자바스크립트로 변환해준다.

COMPONET는 부모자식관계를 이룰 수 있고 css도 넣을수 있다.

• HTML 형식의 인라인 스타일을 사용하지 않고 객체 형식으로 표현한다. style = {{color: "red"}}

PROPS

porps는 properties의 줄임말로 정질, 특징, 속성을 의미한다.

• 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용된다(매개변수처럼 전달).
• 수정할 수 없다(읽기 전용).

STATE

state는 컴포넌트 안에서 사용되는 데이터 또는 정보를 포함하는데 쓰이는 리액트 내장 객체이다.

• 일반 변수처럼 함수가 종료될때 사라지는 것이 아닌 리액트에 의해 보존 된다.

Props vs State

https://github.com/uberVU
https://ko.reactjs.or
참조