1. 리액트란? (React)
UI(User Interface)를 만들기 위한 자바스크립트 라이브러리이다.
똑같은 말로, UI를 풀어서 이야기하자면 Renders UI & Response to Events 로 정리할 수 있다.
리액트를 또한 한단어로 정리하자면 "컴포넌트들" 이라고 할 수 있다. 컴포넌트들 단위로 UI를 렌더링하고 이벤트에 반응하도록 만들어나가는 라이브러리인 것이다.
프레임워크와 라이브러리의 차이점
프레임워크는 정해진 틀이 있고, 그안에서 제공되는 모든 것들을 활용하여 원하는 것들을 만들어나가는 것을 의미한다. UI, routing, http clients, state management 등이 들어있다.
라이브러리는 큰 골격이나 규칙이 정해졌다기 보다, 단 한가지 조금 더 좁은 문제를 해결하기 위해서 작은 솔루션 단위로 구성된 것을 의미한다.
리액트는 이 다양한 문제들 속에서 UI를 만들 수 있게 도와주는 라이브러리이다. 그렇기에 리액트를 만들면서 프레임워크에서는 전부 제공 하고 있었던, 네트워크 통신이 필요하다면 fetch나 다른 네트워크 통신 라이브러리를 사용하면 되고, 라우팅이 필요하다면 라우팅에 필요한 라이브러리를 사용하면 되는 것이다.
이처럼 우리가 사용하고 싶은 것을 자율적으로 선택하여 가져올 수 있다는 장점이 있다.
리액트의 3가지 특징
- JSX 문법
- Component 기반
- Virtual DOM
2. 리액트 컴포넌트란?
응집도가 정말 높은 블럭,
다른 컴포넌트들과는 독립적으로 존재하여 최고의 응집도를 가지고 있어야한다.
이 좋아요 버튼은 독립적인 기능을 수행하고, 잘 고립되어 다른 UI와 연결되지 않아 다른 것이 변경되고 업데이트 되어도 영향을 받지 않는다. 그리고 이 버튼 컴포넌트만 따로 떼어 재사용도 가능하다.
리액트 철학
웹페이지를 박스단위로 바라보는 것이 중요하다는 것을 이전에 강조하였다.
이 박스 단위로 바라보고, 사고하고, 구현해 나가는 방식이 컴포넌트들을 일종의 박스 단위로 구성하여 웹을 만들어 나가는 방식과도 비슷하게 생각하면된다.
리액트에서 추구하는 철학은 독립적이지만,응집도가 높은 컴포넌트들을 잘 만드는 과정인 것이다.
3. 컴포넌트를 나누는 기준?
재사용성 - don't repeat yourself
반복하지 말고 재사용성이 가능해야한다.
단일책임 - SR(single responsibility)
다른 곳에서 재사용할 확률은 낮더라도 한 컴포넌트 안에서 너무 많은 로직이나, 다양한 일들을 하게 될 수도 있다. 이 때 작은 단위로 한 ui 안에서 하나의 도메인을 담당할 수 있도록 잘게 쪼개어 컴포넌트를 만들 수도 있다.
4. 리액트 동작원리
리액트에는 데이터를 내부 상태를 가지고 있는 State와 외부로부터 전달받는 상태 Props가 있고, 이 두가지의 파트를 나타내는 Render가 있다. 그리고 이러한 상태(State, Props)가 변경될 때마다 Re-rendering이 된다. 즉 렌더가 재호출되어서 변경 상태를 업데이트한다. 그리고 어플리케이션 화면에는 실제로 변경된 부분만 화면에 효율적으로 업데이트된다!
5. 리액트 훅이란?
함수형 컴포넌트가 나오기 이전에는 클래스 형태로 컴포넌트를 만들어 사용해왔다. 클래스를 정의하고 상속하는 형태로 구성했고, state는 멤버변수로, render라는 멤버함수에는 JSX 문법으로 어떻게 UI를 표기할 건지 정의했다.
이러한 클래스 컴포넌트들은 단점이 있었다.
절차형 프로그래밍에 익숙한 프론트 개발자들에게 클래스를 다루는 것이 어려웠으며, 로직들을 재사용하기 어렵다는 점 등이 문제가 되었다.
함수형 컴포넌트들은 함수로 만들며 JSX를 리턴하는 것만 잘 만들면 컴포넌트를 구성할 수 있고,
React Hooks를 이용하여 로직들을 재사용할 수 있다.
Hook이란, 재사용 가능한 로직들을 낚아챈다는 의미,
리액트 훅이란 재사용 가능한 함수다! 라고 생각하면 된다.
그리고 이러한 훅들은 use로 시작한다.
useState, useEffect, useRef, useMemo, useCallback, usecontent 등 모두 훅이라고 생각하면 된다.
직접 사용자가 custom hook을 만들 수 있는데, 이때도 use로 시작하게끔 네이밍을 정해주면 된다.
Hooks은(함수들은) 값의 재사용이 아니라 로직의 재사용을 위한 것이다.
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
