리액트를 다루는 기술(1권)
오후 2022-12-14수요일. 5장까지 읽음.
리액트 이해
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용합니다.
구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리
리액트 프로
036
...
사용자 화면에 뷰를 보여 주는 것을 렌더링.
리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까요?
리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과
컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링'개념을 이해해야 합니다.
1.1.1.2 조화 과정
리액트에서 뷰를 업데이트 할 때는 "업데이트 과정을 거치낟"라기 봗는 "조화 과정(reconciliation)을 거친다."라고 하는 것이 더 정확한 표현.
컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처러 보이지만, 사실은 새로운 요소로 갈아끼우기 때문입니다.
render함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 ,새로운 데이터를 가지고 render 함수를 또 다시 호출한다. 그러면 그 데이터를 지닌 뷰를 생성해 낸다.
p.103
3.4 state
리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props 를 읽기 전용으로만 사용할 수 있습니다. props 를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 합니다. 예를 들어 현재 상황에서는 App 컴포넌트에서 MyComponent를 사용할 떄 props를 바꾸어 주어야 값이 변경될 수 있는 것이죠. 반면 MyComponent에서는 전달받은 name값을 직접 바꿀 수 없습니다.
리액트에는 두 가지 종류의 state가 있습니다.
하나는 클래스형 컴포넌트가 지니고 있는 state이고,
다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state입니다.
p.112
3.4.2.1 배열 비구조화 할당
Hooks 를 사용하기 전에 배열 비구조화 할당이라는 것을 알아봅시다. 배열 비구조화 할당은 이전에 배운 객체 비구조화 할당과 비슷합니다. 즉, 뱅려 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법입니다.
const array = [1,2];
const one = array[0];
const two = array[1];
array 안에 있는 값을 one과 two에 담아주는 코드인데요. 위 코드는 배열 비구조화 할당을 사용하면 다음과 같이 표현할 수 있습니다.
const array = [1,2];
const [one, two] = array;
p.156
5.4 정리
컴포넌트 내부에서 DOM 에 직접 접근해야 할 때는 ref를 사용합니다. 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용하세요.
이 시점에서 오해할 수 있는 부분이 있는데, 서로 다른 컴포넌트끼리 데이터를 교류할 때 ref를 사용한다면 이는 잘못 사용된 것입니다. 물론 할 수는 있습니다. 컴포넌트에 ref를 달고 그 ref를 다른 컴포넌트로 전달하고... 다른 컴포넌트에서 ref로 전달받은 컴포넌트의 메서드를 실행하고.... 하지만 이 방법은 리액트 사상에 어긋날 설계입니다. 앱 규모가 커지면 마치 스파게티처럼 구조가 꼬여 버려서 유지 보수가 불가능하지요. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 ⇔ 자식 흐름으로 교류해야 합니다. 나중에 리덕스 혹은 Context API를 사용하야 효율적으로 교류하는 방법을 배울 것입니다.
아직 함수 컴포넌트에서 ref를 사용하는 것은 배우지 않았는데요. 함수 컴포넌트에서 useRef라는 Hook 함수를 사용합니다. 사용법은 이 장에서 배운 React.createRef와 유사합니다.
function reducer(state, action){
return {...}; //불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}
액션 값은 주로 다음과 같은 형태로 이루어져 있습니다.
{
type : 'INCREMENT',
//다른 값들이 필요하다면 추가로 들어감
}
Reducer는 기본적으로 두 개의 인수 current state와 action 을 받고
이렇게 받은 두 인수를 기반으로 해서 새 상태를 반환하는 함수.
const reducer = (state, action) => newState;
이 reducer(리듀서)로 우리는 상태관리(state management)를 할 수 있습니다.
reducer(리듀서)와 initialState(초기 상태)를 전달하면 useReducer란 Hook 이 새로운 상태(state)와 dispatch(디스패치)함수를 리턴해 줍니다.
const[state, dispatch] = useReducer(reducer, initialState);
이러면 우리는 액션 타입(action type)과 데이터(data)를 이용해서 dispatch(디스패치) 함수를 사용할 수 있습니다.
dispatch 란 보내다 라는 뜻이 있습니다.
일반적으로 state(상태)가 previous state(이전 상태)에 크게 의존하거나 state(상태)가 매우 복잡한 경우 useReducer을 사용하는 것이 좋습니다.
앱이 복잡하고 확장성이 있을 경우 useReducer를 이용한 상태 관리가 좋을 듯 하다.
왜냐하면 useREducer로 구현한면 나중에 action(액션)만 추가하고 그리고 dispatch함수만 자식 컴포넌트에 전달하면 되기 때문이다.
그러나 간단한 상태관리일 경우는 useState를 이용해서도 충분히 앱을 구현할 수 있기 때문에 굳이 useReducer를 사용할 필요가 없을 듯 하다.
🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴🔴
State의 변화 👉 렌더링 👉 컴포넌트 내부 변수들 초기화
Ref의 변화 👉 No 렌더링 👉 변수들의 값이 유지됨
State의 변화 👉 렌더링 👉 그래도 Ref의 값은 유지됨
https://itprogramming119.tistory.com/entry/React-useRef-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C
https://link2me.tistory.com/2246
const ref = useRef(value);
{current : value}
댓글