왜 리액트인가?
리액트란?
공식문서에서는 리액트를 아래와 같이 정의한다.
A JavaScript Library for building user interfaces
사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리
SPA vs CSR
Single Page Application
한 어플리케이션 내에서 페이지 내에서 자유자재로 네비게이션 할 수 있음
CSR
사용자가 웹어플리케이션에 접속했을때 html즉각적으로 보는게 아니라 리액트 라이브러리도 다 다운로드 받은 후, 사용자 화면에 클라이언트측에서 렌더링 이루어짐
ssg/r
gatsby,nextjs
라이브러리와 프레임워크 차이점
공통점
복잡한 개발을 편리하게 하기 위해 미리 작성해서 제공해주는 코드다.
프레임워크
원하는 기능 구현에 집중해 개발할 수 있도록 필요한 기능을 갖추고 있는 것
일정한 형태를 가지고 다양한 형태의 결과물을 만드는것
ui,routing, http clients, state management 등의
집을 짓기 위한 골격이 다 갖춰져 있는 정해진 틀 안에서 만들어나가는 것
Angular, ios, android
단점
1) 프레임워크에서 권장하는 것들을 다 지켜야해서 러닝커브 높음
2) 자율성이 떨어진다 규칙을 따라야 한다.
라이브러리
하나의 작은 솔루션 단위의 기능만을 도구처럼 제공한다.
필요한 라이브러리를 골라서 사용할 수 있으므로 자율성이 보장된다.
vue : http, state management 제공안하므로, 경량형으로 중간 사이에)
리액트의 철학
리액트란 컴포넌트들의 집합체이다.
좋은 컴포넌트란?
A highly cohesive building block for UIs loosely coupled with other components
다른 컴포넌트들과는 독립적이고 고립적이지만 내부의 응집도가 높은 블록
Render UI and responds to events
ui를 컴포넌트 단위로 보여주고 나서 이벤트에 반응하도록 만들어진 라이브러리
: 페이지에서 독립적(고립적)이고 재사용성이 좋은 컴포넌트들을 조립해 만들어나가는 것
컴포넌트 나누는 기준은
재사용성(DRY): Don't Repeat Yourself
: 반복하지 말고 재사용하라.
만약, 같은 스타일에 텍스트만 다른 보라색 버튼이 여러개 있다고 가정해보자.
이럴 때는 버튼을 각각의 컴포넌트로 나누기 보다는 하나의 컴포넌트 버튼을 만들고, 사용하는 곳에서 원하는 텍스트를 변경할 수 있게 해주는 것이 재사용성이 높다.?
단일책임(SR: Single Responsibility)
한 컴포넌트 안에서 너무 많은 UI나 로직을 갖지 않도록 하자.
재사용성이 낮더라도 하나의 책임을 할 수 있도록 작은 단위로 컴포넌트를 나누어라.
리액트 동작 원리
리액트에서 컴포넌트를 정의하는 방식은 클래스, 함수형이 있다.
함수형 컴포넌트
state: 내부 상태
props: 외부에서 속성값을 전달(propertis) 함수의 인자
jsx(javascript xml) : html처럼 생긴 자바스크립트 문법
각각의 컴포넌트들은 그들의 상태값을 가지고 있는 state로 구성되어 있다.
사용자가 클릭, 입력했을때
리액트에서 상태값이 변경된 요소만 자동적으로 새롭게 업데이트해준다.
리액트 트리구조에서
content안의 article만 업데이트 해야겠구나(필요한 부분만)
어떻게 가능하나?
DOM(Document Object Model) : 문서 객체 모델
html, head, body와 같은 태그들을 javascript가 이용할 수 있는 개체를 의미
브라우저에서 html구조를 dom tree를 만들어 놓는다.
리액트는 가상의 돔트리를 가지고 있어 어떤 상태값이 변경되어 업데이트 되면
바로 돔트리에 업데이틑 하는것이 아니라 이전의 트리와 비교해서
변경된 요소가 무엇인지 판단해 실제 브라우저에서 필요한 돔트리요소만 변경한다.
업데이트 되는 노드만! =>효율 적이고 빠르게
!
데이터를 state(내부 상태), props(외부로부터 전달받은 상태)를 나타내는 render가 있다.
둘 중 하나의 상태라도 변경될때마다 re-render(렌더가 다시 호출되어 바귄 상태를 업데이트 하는 것)된다.
실제로 변경도니 부분만 화면에 업데이트 된다.
리액트 훅이란?
클래스 컴포넌트 단점
클래스? state(멤버변수), jsx로 멤버함수 적용
- 클래스는 어려워
this 바인딩 이슈
로직들을 재사용 하기 어려움(렌더, 라이프사이클의 로직)
그래서 손쉽게 나온것이 함수형!
함수형
함수로 컴포넌트를 만들고 상속과 클래스 몰라도 손쉽게 컴포넌트를 만들수 있게 되었다.
react-hooks
Hooks are functions that
훅은 리액트의 state와 lifecycle기능을 연결할 수 있는 재사용 가능한 로직들이다.
useState : 상태관리 로직
useEffect : 컴포넌트 생애주기 관리 로직
useUser : 서버에서 받앙노 사용자(커스텀훅)
이런 훅을 잘 적용하면 필요한 컴포넌트에서 잘 사용할 수 있다.
hooks는 값의 재사용이 아니라 로직의 재사용을 위한 것이다.
