React

React 란?

• 웹, 모바일 앱을 손쉽게 만들 수 있게 해 준다.
• 심플한 정적 사이트부터 복잡한 규모까지 React로 구현이 가능하다.
• may 2013 (오픈소스 공개) → may 2013 (React Native) → Feb 2019 (함수형(Hooks) 컴포넌트) → mar 2022 (SSR+)
• 가장 많이 쓰이는 웹 프레임워크 1위
• React를 배워두면 React Native를 통해서 모바일 어플도 가능하고, React + Electron과 조합하면 데스크톱 애플리케이션도 만들 수 있어 1석 3조

React 철학

• React는 UI를 components 단위로 보여주고 이벤트에 반응하도록 만든 라이브러리.
• 독립적이고, 고립적이면서 재사용성이 뛰어나다.
• 구조는 단 하나의 Root 요소가 있다. Root 요소 안에 UI components를 넣어 꾸며 나간다.

Component 나누는 기준

• 재사용성이 되는 요소들
• 단일책임 ⇒ 다른 곳에서 재사용할 확률은 낮더라도 한 컴포넌트 안에서 너무 많은 UI를 가지고 있거나, 너무 많은 로직들이 들어 있어 다양한 일들을 하게 된다면 이것들을 조금 더 작은 단위로 나누어서 컴포넌트를 만든다.

React 동작 원리

• 함수형 컴포넌트로 사용가능 React에서 함수형 컴포넌트는 무조건 대문자로 시작
• 함수에서 반환하는 값은 UI 상에서 표가 할 JSX 문법을 사용
• 컴포넌트에서 가지고 있는 내부상태 데이터는 useState를 사용
• 외부에서 변경 가능한 속성은 Props로 전달
• 상태가 변경될 때마다 render 이 된다.
• React는 DOM을 바로 변경시키지 않고 vurtual DOM 을 통해 비교하며 실제 DOM을 변경

JSX 문법

• HTML처럼 사용가능
• HTML 태그를 반환할 때는 꼭 하나의 태그만 반환 가능
• 다수의 태그로 반환하고 싶다면 부모태그로 감싸줘야 반환가능
• HTML에서는 class라고 사용하지만 JSX는 className 카멜케이스로 사용
• {} 중괄호를 이용해서 자바스크립트 코드가 사용가능하다.
• 반복되는 태그나 속성이 있으면 배열로 묶어 map 메서드를 써서 태그를 뿌려줄 수 있음
• 리액트에서 사용하는 state는 불변성을 유지해야 한다.
• 객체나 배열 내부를 직접적으로 업데이트하면 안 되고, 업데이트하려면 객체나 배열을 새로 복사해서 업데이트해줘야 한다.