[React] 1. 리액트란? (2)

컴포넌트 나누는 기준?

재사용성 DRY

Dont Repeat Yourself : 버튼을 다시 사용할 수 있게끔

단일책임 SR

Single Responsibility : 한 컴포넌트 안에서 너무 많은 일을 하지 않게끔

리액트 동작 원리

함수형 컴포넌트

리액트는 컴포넌트를 함수 형태로 만들 수 있다

• 리액트 함수형 컴포넌트의 이름은 무조건 대문자로 시작해야한다
• html 처럼 생긴 JSX(JavaScript XML) 문법을 사용하는 값을 반환해야 한다. → Render
• 상태값 state : 내부 상태 (변경될 때마다 re-render가 된다)
• 속성값 props : 외부로부터 전달 받은 상태

사용자(Client)는 이 상태값을 변경 시키고 리액트에서는 해당 컴포넌트의 상태값을 변경시켜 업데이트 해준다.

웹페이지의 구조

웹페이지는 DOM Tree 구조로 구성이 됨

리액트는 브라우저의 돔트리에 있는걸 바로 변경 하는게 아니다.

1. 가상 돔 트리를 만들어 변경
2. previous tree와 비교해서 변경된 모습을 확인
3. 변경된 부분만 업데이트

이래서 조금더 빠르게 업데이트해준다

리액트 훅이란?

함수형 컴포넌트 HOOKS

함수형을 사용하기 전에는 클래스 형태로 만들었다.

클래스 컴포넌트의 단점

• 클래스는 어렵다 : 프론트엔드 개발자가 자주 사용하는 자스는 절차형
• this 바인딩 이슈 (까다로움)
• 로직들을 재사용하기가 어려움 : 재사용하려면 상속이나 뭘 해야하는데 프론트엔드 개발자에겐 어려움

위 단점들을 개선 시킨 것이 함수형 컴포넌트이다.

React Hooks

훅은 함수형 컴포넌트에서의 재사용 가능한 로직들을 갈고리처럼 연결함 → 재사용 가능한 함수다

훅스는 use로 시작한다 : useState useEffect . . .

• useState: 상태 관리 로직
• useEffect: 컴포넌트 생애주기 관리 로직
• useUser: 서버에서 받아온 사용자

!! HOOKS는 값의 재사용이 아니라 로직의 재사용을 위한 것이다.