TIL-43

20210831 TIL

실전 리액트 프로그래밍

[리액트를 사용한 코드의 특징]

• jsx 부분에서 배열을 표현할 때는 항상 key를 입력해줘야 함(화면을 효율적으로 업데이트)
• ...(전개 연산자, 스프레드 문법)

const arr = [1,2,3];
const arr2 = [...arr]; // arr 안에 있는 모든 요소들을 나열
// const arr2 = [arr[0], arr[1], arr[2]];
const arr3 = [...arr, a] // [arr[0], arr[1], arr[2], a];

리액트로 작업한 코드

• 선언형 프로그래밍
• 이벤트 핸들러에서 데이터를 변경하는 작업만 한다.
• 비즈니스 로직과 UI 코드가 분리되어 있다.
• UI 코드는 jsx 부분에서 한 번만 작성
• 다양한 방식으로 그릴 수 있다.
• DOM 환경 뿐만 아니라, 모바일 네이티브 UI 표현 가능
• 추상화 단계가 높다.(비즈니스 로직에 집중할 수 있다.)

JS로 작업한 코드

• 명령형 프로그래밍
• 데이터를 변경하는 코드도 있고, UI 코드도 섞여 있다.
• DOM api 이용, 돔 환경이 아닌 곳에서 사용하기 힘들다