리액트(React)에 대해 알아봅시다

1. 리액트를 왜 사용하는 걸까?

바로 유저 인터랙션(상태 변화) 처리를 효율적으로 하기 위해서입니다.

"DOM 요소 변화를 어떻게 적용할 것인가 🧐"

 

이전 방식

• JS를 사용해서 HTML로 구성된 UI 제어
• 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤, 특정 이벤트가 발생하면 변화를 줌
• 규모가 커질수록 관리 힘듦. 데이터 / 레이아웃 레이어 구분 어려워짐
• 명령형 접근방식은 코드 재활용이 어려움 ⇒ 리액트는 코드를 작은 컴포넌트들로 구성하는 방식으로 유지보수와 관리가 용이함(선언형 방식)

명령형 프로그래밍은 무엇을 어떻게 할 것인가에 가깝고, 선언형 프로그래밍은 무엇을 할 것인가에 가깝다.

명령형 프로그래밍 VS 선언형 프로그래밍

 

 

• Virtual DOM과 실제 DOM 비교해서 변경된 부분만 실제돔에 반영한다.
• Virtual DOM은 메모리에 가상으로 존재하는 돔으로써, js객체라 실제 브라우저 돔을 보여주는 것보다 훨씬 빠름

2. JSX

• syntactic sugar 일종 / xml형태로 선언 시 BABEL을 통해 JS로 변환됨

https://babeljs.io/

Babel · Babel

React.createElement(
  type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  [ ... children] // 자식으로 넣어주는 요소들
);

 

3. SPA

• 웹 앱에 필요한 모든 정적 리소스를 앱이 처음 로딩될 때 다운로드
• 페이지 간 이동 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신 (새로고침 X)
• ⇒ 더 나은 사용자 경험 제공

단점 : 초기 구동속도가 느리다. SEO 문제

💡 Hydration

1. 첫 페이지는 SSR방식으로 HTML 전송
2. 브라우저에서 JS 다운받고 React 실행
3. 다른 페이지로 이동 시, CSR하는 방식.

#CSR #SSR #react-helmet #Next.js #Hydration#CSR #SSR #react-helmet #Next.js #Hydration

---

SPA와 SEO

SEO 방법 정리

React Hydration

리액트의 hydration이란?

 

 

4. React 상태관리와 Side Effect

■ useState

왜 const 상수로 할당할까?
const [title, setTitle] = useState(title);

• 상태는 컴포넌트 인스턴스 단위로 (독립적으로) 생성된다.
• 컴포넌트 함수 재실행되면 useState함수도 재실행하는데, 초기값은 처음 호출됐을 때만 사용되고 그 이후 재실행될 때는 상태를 재 초기화하지 않음. 대신 상태값을 추적해서 최신 상태를 제공
• 컴포넌트 함수가 재실행되면 상태값의 새로운 snapshot을 얻게 됨.
• 함수 컴포넌트내에 직접 setter함수 사용하면 안됨!
• state는 꼭 setter함수 사용해서 변경할 것.
  • 리액트 컴포넌트는 이전값과 바뀐 값을 확인할 때 일일히 값을 비교하는 게 아니라 객체를 복사해 새로운 객체 생성 후 변경하는 작업을 함.
  • 그냥 변수값을 바꾸고 setter에 집어넣을 경우, state의 값은 바뀌어도 객체의 참조 값은 여전히 바뀌지 않았고, setState에 넣어주는 state의 참조값도 이전의 참조 값과 동일하다

■ Context API와 Redux

💡 Props Drilling

 

1) Context API

• Context.Provider는 value로 저장된 값이 변경되면 useContext(Context)를 사용하는 컴포넌트도 같이 렌더링을 한다.

2) Redux

• 상태를 저장하는 store를 따로 설정
• thunk, sage와 같은 미들웨어
• boilerplate code & 높은 러닝 커브

#react-query #recoil #mobx

 

Side Effect란?

리액트의 임무는 결국 사용자 요청에 따라 UI를 렌더링하는 것. 사이드 이펙트는 이를 제외한 나머지를 의미함

Ex) http request, 로컬저장소에 저장, 오류 처리 …

• 리액트는 state등이 변화할 때마다 컴포넌트를 리렌더링. 그때마다 응답을 보낸다면 => 😲 ∞이러한 작업들을 useEffect로 관리
• 직접 컴포넌트 함수에 들어가는건 버그 발생 가능성 높음.

useEffect란?

---

5. React 최적화

1. useMemo - 이전 값 재사용

특정 값이 바뀌었을 때만 특정함수를 호출해서 연산 실행.

예) 활성 사용자수를 세는 함수가 있을 때, 상관없는 인풋값이 바뀔 때도 함수가 실행됨 → 원하는값(활성 사용자 수)이 바뀐 게 아니라면 리렌더링할 때 이전에 저장했던 값 그대로 사용

const count = useMemo(()=>{호출할 함수},[의존배열])
//의존 배열에 원하는 값 넣어줌(count할 객체)

 

2. useCallback - 함수 재사용

매번 리렌더링될 때마다 새로운 함수 만듦 → 원하는 값이 바뀔때만 새로 만들어짐 그렇지않으면 기존 함수 재사용

//함수를 useCallback으로 감싸줌
const onChange = useCallback(()=>{
	const {name,value} = e.target;
	setInputs({
		...inputs,
		[name]:value
	});
},[inputs]); //inputs 값이 바뀔 때만 새로 만들어짐

• depth 배열에 적어주지 않으면 가장 최신상태를 참조하는 게 아니라 이전의, mounted될 때 상태 참조하게 됨 ⇒ depth배열을 []로 작성할 경우, mounted된 상태를 계속 재사용하게된다.(함수가 새로만들어지고 최신상태 참조하지 않음. 참조할 값이 없을 때 빈배열로 작성)

3. useReducer - useState보다 복잡한 상태관리

useState보다 써야하는 코드가 많지만, 상태관리를 해야할 변수가 많다면 useReducer를 고려

//1. 초기값 작성
const initialUserState = {
	isAdmin: false,
	nickname:'',
	email: ''
}

//2. Reducer 작성
const userReducer = (state, action) => {
	switch (action.type) {//action type에 따라 다른 업데이트 진행
		case 'reset' : {
			return initialUserState;
		}
		case 'toggleToBeAdmin': {
			return {...state, isAdmin:!state.isAdmin}
		}
		...
	}
}

//3. 컴포넌트 내에서 Reducer함수 실행
const User = () => {
	const [user, dispatchUser] = useReducer(userReducer, initialUserState)
	// useReducer(reducer함수, 초기값) => useState처럼 state, setState함수를 return

	const reset = () => dispatchUser({type:'reset'}) //dispatch 함수에 type을 인자로
	const toggleTobeAdmin = () => dispatchUser({ type: 'toggleToBeAdmin' })
	const updateNickname = event => dispatchUser({ type: 'updateNickname', nickname: event.target.value })

	...
}

---

리액트는 완벽한 프레임워크일까? 🧐

관심도 & 만족도 1위 스벨트 https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/

• 스벨트는 가상돔을 사용하지 않아 이전 스냅샷을 비교하는 오버헤드가 발생하지 않음.
• 빌드과정에서 별도의 업데이트 로직 실행