카테고리 없음

리액트 개념 공부

이채야채 2022. 3. 21. 23:09

리액트를 사용하는 이유? 라이브러리

 

현대에서는 웹페이지가 고도화되어 단순한 정적인 웹페이지에서 벗어나 복잡하고 동적으로 되었다. =>

SPA의 등장 정적인 리소스를 최초의 1회만 렌더하고 이후부터 필요한 데이터를 ajax요청을 통하여 가져온다. 그렇다면 페이지 이동없이 특정 영역만 데이터바인딩을 할 수 있다.

  • virtual dom이 있다.
  • React native의 앱 개발 가능성
  • 컴포넌트를 사용한 재사용이 가능하고 따라서 유지보수가 한결 쉬워졌다.

1. virtual dom의 존재

 

리액트의 가장 큰 특징 중 하나다.

기존의 DOM은 html을 로드하면서 DOM 전체를 바꾼다.

Virtual DOM은 실제 DOM과 비교해, 달라진부분 찾아내어 바꾼다. --> 필요없는 연산을 하지않는다.

이러한 VIrtual DOM덕분에 컴포넌트 단위의 개발이 가능하다.

 

2.  React native 앱 개발 가능성

 

웹과 앱은 엄청난 연관성이 있다.

React를 잘활용하면 React Native로 앱을 개발 할 수 있다.

 

3. 컴포넌트 단위 작성

 

컴포넌트형 개발이기에, 재사용이 가능하며 유지보수가 용이하다.

브라우저 화면에 보이는 하나하나의 버튼 탭 등이 모두 컴포넌트로 볼 수 있다. 이것이 모여서 하나의 VIEW를 이룬다.

 

 

Virtual Dom?

 

💡 dom이란 html에 작성한 그 전체 구조에 맞춰서 배치를 시키고, 이것들에 내가 추가적으로 명령을 보내서 속성이나, 디자인, 배치등을 조작할 수 있는 상태. 즉 html로 설계된 웹페이지가 브라우저안에서 화면에 나타나고, 이벤트에 반응하고 등의 기능들을 수행할 객체들로 실체화된 형태(자바스크립트로 DOM을 조작)

 

(미니어처를 생각해본다. 모든 가구를 옮기려면 힘들다. 미니어처로 어떤것만 움직여야하는지보고 실제로 움직여야하는것만 움직이게.)

 

dom과 유사한 객체를 메모리상으로 구현하고, 변경사항이 생기면 메모리에 올라간 vurtual Dom을 수정하고. DOM에 대한 비교를 수행한후 변경사항에 대해서만 DOM에 반영한다. => 더 반응성이 빠른 웹을 구현할수있다. 

 

 

JSX란 무엇인가?

 

Javascript XML의 약자로 자바스크립트에서 XML(다목적 마크업 언어) 유사구문을 확장시킨 문법이다.

HTML과 같은 문법과 함께 자바스크립트를 표현 할 수있어 가독성이 높고 작성하기 쉽다.

 

State와 Props의 차이?

 

- State

현재 컴포넌트(프로그래밍에 있어 재사용이 가능한 독립된 모듈)의 생명주기동안에 변경될수 있는 정보를 담고 있는 상태 

 

- Props

부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터

 

리액트 훅이란?

 

hooks는 리액트 v16.8에 새로 도입된 기술이다. 

함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능이다.

더이상 상태관리를 하기위해서 클래스형 컴포넌트를 사용하지 않아도 된다.

hook을 통해서 함수형 컴포넌트에서도 생명주기 메소드를 사용할 수 있으며, 상태관리가 가능하다.

 

함수형 컴포넌트의 장점 ?

 

클래스형 컴포넌트보다 선언이 간편.

클래스형 보다 메모리를 절약

16.8부터 hook으로 라이프사이클 사용 가능

 

함수형과 클래스의 차이 ?

 

함수형이 메모리를 덜사용

함수형이 사용하기가 더쉽다.

state사용법이 다르다.

 

리액트의 라이프사이클이란?

 

각각의 컴포넌트에는 라이프사이클이있다. 즉 컴포넌트의 수명주기가 존재한다.

컴포넌트의 수명은 페이지에서 렌더링되기전인 준비단계 ~ 페이지에서 사라질때 까지다.

리액트 라이프사이클은 컴포넌트가 Dom위에 생성(마운트)되거나, 사라질때(언마운트) 혹은 업데이트될때 호출되는 API다.

 

업데이트는 4가지 상황에서 일어난다.

  • props가 바뀔때
  • state가 바뀔때
  • 부모 컴포넌트가 리렌더링될때 
  • this.forceUpdate로 강제로 렌더링 시킬때 

 

- constructor(생성자)

 

컴포넌트의 생성자 메서드다. 컴포넌트 생성시 가장먼저 실행되는 메서드다. 초기 state를 설정할 수 있다.

클래스형에서는 초기설정을 해야하는데 hook에서는 useState로 손쉽게 설정할 수 있다.

 

- getDerivedStateFromProps

 

props로 받아온것을 state에 넣어주고 싶을때 사용한다. 

 

-render

 

컴포넌트를 렌더링하는 메소드

 

-componentDidMount

 

컴포넌트가 생성되고, 첫 렌더링이 된 후에 호출되는 메서드. 주로 여기서 비동기 요청 작업을 처리

함수형 hook에서는 useEffect를 사용

 

-shouldComponentUpdate

 

컴포넌트를 리렌더링 할 지 말 지 결정하는 메서드

 

-getSnapShotBeforeUpdate

 

vitualDom이 실제 Dom에 반영되기 직전에 실행

 

-componentDidUpdate

 

컴포넌트가 업데이트되고, 업데이트된 부분이 모두 반영된 후에 호출 되는 메서드

 

-componentWillUnmount

 

컴포넌트가 사라지기 직전에 호출되는 메서드 

 

Props Drilling이란?

 

상위컴포넌트에서 하위컴포넌트로 props를 전달하는 과정을 의미한다.

깊이가 깊을수록 하위컴포넌트로 내려주는 과정이 복잡해지고, 예상치 못한 오류가 생길 가능성이 높아지므로 상태관리를 해줄수있는

라이브러리 redux, recoil 등이 생겨났다.

 

 

Redux의 정의,필요성, 구조

 

리덕스는 리액트에서 사용되는 상태관리 라이브러리중 하나다.

프로젝트의 규모가 커지면, state를 Props로 내려주기가 복잡해지고 예상치 못한 오류가 생길 수 있다.

이것을 방지하기위해 상태관리 라이브러리인 리덕스를 사용해준다.

 

  • 스토어

상태가 관리되는 오직 하나의 공간

  • 액션

상태를 변화시킬때 참조하는 객체

  • 리듀서

현재 state와 action을 이용해 다음 state를 만들어낸다.

  • 디스패치

액션을 발생시키는곳

 

리덕스 사용시 순수 함수를 사용하므로, 유지보수 및 디버깅에 유리하다. 

 

state를 직접변경하지않고 setState로 변경시키는 이유?

 

state는 불변성을 유지해야한다.

state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있다.

상태변경을 시켜주고, 변경에따라 구성요소를 다시 렌더링 시키기 위해서는 setState가 필요하다.

 

https://ui.toast.com/weekly-pick/ko_20220217