리액트 (React) 기본 정리

1. 리액트란 무엇인가?

• 자바스크립트 ES6 기반의 프론트엔드(front-End) 프레임워크(라이브러리)

2. 리액트가 왜 필요 한가?

• 고객과의 상호작용이 많은 앱에서 편리한 기능 제공
• 귀찮고 복잡한 DOM관리와 상태(state)관리 최소화
• 오직 기능 개발에만 집중할 수 있도록 고안됨

3. 리액트의 특징

• 컴포넌트(component) 단위로 개발 (Bottom-Up 개발)
  : 하나의 의미를 가지는 단위 모듈인 컴포넌트들로만 이루어진 프로젝트를 만들면 직관적이고, 재사용성이 높아 진다.
• 단방향 데이터 흐름 (One-way Data flow). 상위 컴포넌트에서 하위 컴포넌트로만! (Top-Down 데이터)
• JSX 란 자바스크립트 확장 문법 사용
  1) 자바스크립트 내에서 HTML 작성도 한번에 직관적으로 할 수 있게 해주는 문법
  -> 별도의 html 파일이 필요 없음
• JSX에서 중괄호 {} 안에 쓸 수 있는 JS코드는 표현식(변수에 직접 할당 가능한 코드)만 허용
  2) JSX문법으로 작성한 코드는 babel이란 컴파일러가 자바스크립트 코드로 자동으로 변환해서 실행해준다.
  

Props & State

• Props: 부모 컴포넌트가 자식 컴포넌트를 호출할 때 넘기는 객체형 매개변수
• State: 고객과의 상호작용에 따라 변할 수 있는 데이터를 관리하는 객체

Props는 immutable object이다. So what?

따라서 push, unshift 같이 원본을 수정하는 mutable method는 props에 허용되지 않는다.
예를 들어, 배열 목록에 새로운 것을 추가하려면 [...prev, new]나 prev.concat(new)와 같은 immutable한 방법을 적용해야만 한다.

What is "Lifting state up"?

상태와 상태변경함수는 하나의 클래스 컴포넌트 안에 존재한다.
그리고 상태변경함수는 props를 통해 하위 컴포넌트로 전달될 수 있고, 그 하위 컴포넌트가 상태변경함수를 실행하면 상위 컴포넌트의 상태값이 변경된다. 이를 보고 Lifting state up, 즉 상태 끌어올림이라 한다. 데이터와 상태변경함수는 위에서 아래로 흐르지만, 아래에서 상태변경함수를 실행하면 위에 존재하는 상태값이 변한다.

State는 왜 직접 할당이 허용되지 않는가?

React에서 규정하고 있는 Lifecycle 때문이다. State가 변경되면 자동으로 리렌더링이 진행되어 새로고침 없이도 변경 사항을 확인할 수 있어야 하는데, 반드시 setState 메소드를 이용해서 state를 변경해야만 자동 리렌더링이 발생하기 때문이다.