React(Docs)/React(Practice)

React 큰그림

ecoEarth 2022. 12. 4. 22:24

What's React?

"A Javascript library for building user interface by facebook(2013)"

리액트는 웹브라우저뿐 아니라, React Natve를 통한 앱어플리케이션, Electron과의 조합으로 데스크탑어플리케이션까지 빌딩할 수 있다.

리액트는 SPA(Single Page Application), CSR(Client Side Rendering)과 연관성이 많은 라이브러리이다.

또한 Gatsby, NEXT와 리액트를 함께 사용하면 SSG(Static-Site-Generation) , SSR(Server-Side-Rendering)도 구현할 수 있다.

Frmaworks VS libraries

Frmaworks: UI, Routing, HTTP Clients, State management등 모든 것들이 갖추어진 것이다. 모든 것들이 갖춰진 대신 그 모든것을 알아야하기에 진입장벽이 높고, 정해진 것 내에서만 해야되기때문에 자유도가 떨어지는 단점이 있다. 웹개발을 위한 프레임워크는 대표적으로 Angular, Vue등이 있다.

 

libraries: UI, Routing, HTTP Clients, State management중 특정한 한가지의 문제를 해결하기위한 것이다. 대표적으로 React는

UI만을 해결하기위해 탄생했지만, 강력한 커뮤니티집단에 의해 사용할 것이 많이 추가되어있는 편이다.

React의 철학

 

React is Renders Ul and responds to events: UI를 보여주고, event에 반응하는 라이브러리

리액트는 컴포넌트단위의 집합으로 바라보는 것이 적절하다.

React is a set of highly cohesive building block in which Uls is loosely coupled to other components.

좋은 Component란 다른 Component와 연결되어있지않고 독립적이야 하며, 재사용성이 높아야한다.

 

그렇다면 어떤 단위로 컴포넌트를 구축해나갈까?

DRY: Don't Repeat yourself 스스로 작성하지말고 재사용할것. -> 재사용가능성을 기준으로

SR:Single Responsibility 단일책임으로 작성할 것 -> 한 컴포넌트내에서 복잡한 기능을 구현하려 하기보다 더 분리하려 노력할 것

 

React코드의 구조

데이터(내부상태를 나타내는 state, 외부로부터 전달받은 상태를 나타내는 props)를 나타내는 reder가 있다.

상태가 변경될때마다 re-render된다.

virtual DOM Tree와 previous tree를 비교해 실제로 변경된 부분만 화면에 업데이트된다. 그래서 빠르게 반응한다.

Hooks

React는 2019년 함수형 컴포넌트(Hooks)는 클래스단위로 컴포넌트들을 만들었던 시기 this 바인딩 이슈, 로직의 재사용 불편함때문에 탄생했다. Hooks는 함수단위로 컴포넌트를 만들 수 있다.

React Hooks: Hooks are function that let you "hook into" React state and lifecycle feature form function component

Hooks(리액트의 함수들은)는 값의 재사용이 아니라 로직의 재사용을 위한것이다.