React 개념정리(1)

React

- 사용자 인터페이스(User-Interface)를 만들기 위한 JavaScript 라이브러리 .

- 언어의 구조가 사람의 생각 구조에 가깝게 직관적이라는 점이 큰 장점

- 단방향 데이터 흐름 (부모에서 자식으로 옮기는 것만 가능)

 

JSX

- JavaScript 확장 문법, React 엘리먼트를 생성한다.

- JSX가 React를 사용하는데 필수는 아니지만, React의 구조를 보다 쉽게 작성할 수 있다.

const element = <h1>Hello, world!</h1>;

- 태그가 비어 있다면 />를 이용해 닫아주어야 한다

- js코드를 적용하고 싶다면 {}를 사용한다

- JSX 내부에서 if문을 사용할 수 없다(IIFE or 삼항 연산자 사용)

- 클래스 이름 적용시 className 사용하기

 

엘리먼트

- React 앱의 가장 작은 단위, 화면에 표시할 내용을 기술한다.

- 엘리먼트는 컴포넌트의 구성요소이다.

 

컴포넌트

- 컴포넌트는 JavaScript 함수와 유사한 개념이다. 'props'라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

함수 컴포넌트와 클래스 컴포넌트

- 함수 컴포넌트 : 컴포넌트를 정의하는 가장 간단한 방법, JavaScript 함수를 작성하는 것.

function Welcome(props){
  return <h1>Hello, {props.name}</h1>;
  }

- 클래스 컴포넌트 : ES6 class를 사용하여 컴포넌트를 정의할 수 있다. 함수 컴포넌트에 비해 몇 가지 추가 기능이 있다.

 

컴포넌트 렌더링

- React 엘리먼트는 DOM 태그로 나타낼 수도 있지만, 사용자 정의 컴포넌트로도 나타낼 수 있다.

const element1 = <div />; // DOM 태그로 나타낼 수도 있지만

const element2 = <Welcome name="Sara" />; // 이렇게 사용자 정의 컴포넌트로도 나타낼 수 있다

- React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 속성과 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.

 

* props는 읽기 전용

- 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다. 즉 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수 처럼 동작해야 한다.

- 순수 함수 : 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환한다.

function sum(a, b) {
  return a + b;
}
// 함수 sum은 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 순수 함수.

function withdraw(account, amount){
  account.total = account.total - amount;
}
// 함수 withdraw는 자신의 입력값을 변경하기 때문에 순수 함수가 아니다.