[React] 리액트 4가지 개념정리

Reference -
코드 스테이츠 Immersive React 강의

https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818

https://reactjs.org/docs/getting-started.html

React의 기본, 컴포넌트를 알아보자

 

Getting Started – React

이해하기까지 정말 오래 걸렸던 리액트...

내 나름의 언어로 정리하고 넘어가려 합니다!😎

 

What is React?

리액트는 자바스크리브 프런트엔드 라이브러리 중 하나로, 컴포넌트라는 개념을 이용해 상태 관리를 보다 쉽고 직관적으로 만들어 유저 인터페이스를 동적으로 만들 수 있도록 도와준다. 페이스북에서 개발하였으며 인스타그램, 에어비앤비, 테슬라 등 여러 굵직한 기업들에서 이용되는 생태계가 아주 큰 유명한 라이브러리이다. 

Component

리액트에서 컴포넌트는 하나의 의미를 가진 독립적인 모듈로써 자바스크립트의 함수와 비슷한 역할을 한다. 컴포넌트는 input으로 props를 받아 리액트 엘리먼트를 반환한다. 이를 통해 하나의 리액트 컴포넌트로 여러 html 태그들을 묶을 수 있어 직관적이며 재사용성이 높은 코드를 짤 수 있다. 

Props & State

컴포넌트에는 props와 state라는 두가지 속성을 가지고 있다. props은 불변하고 state는 가변 하다고 기억하면 편하다! props는 이미 정해진 속성이기 때문에 렌더링 된 후(혹은 마운팅 되거나 업데이트된 후) 내부의 값을 변경할 수 없지만 state는 말 그대로 상태를 뜻하기 때문에 setState를 통해 상태를 변경할 수 있다.

 

리액트에서는 컴포넌트가 바뀌었다고 DOM 전체를 다시 렌더링하지않고 바뀐 부분만 감지하고 그 부분만 바꾸기 때문에 이렇게 두 가지가 개념이 존재하는 것이다. 그래서 상태가 필요한 컴포넌트가 무엇인지, 상태와 관련 없이 독립적으로 기능해야 할 컴포넌트가 무엇인지 판단하는 것이 중요하다. 

 

 

만약 클릭이벤트를 구현하고 싶다면 prop을 통해 부모엘리먼트의 이벤트 핸들러를 자식 엘리먼트에 prop으로 내려주고 자식 엘리먼트에서 물려받은 prop의 이벤트 핸들러를 호출해 부모의 state를 변경하는 것이다. (콜백 함수와 비슷하다!)

 

React one-way data flow

위처럼 리액트에서 데이터의 흐름은 단방향으로 위에서 아래로 흐른다. 그렇기때문에 부모 엘리먼트의 props를 자식 엘리먼트로 정확히 전달해주는 것이 중요하다. 자식과 부모를 연결해주지 않으면 자식은 부모를 바꿀 수 없다! 이 개념이 헷갈린다면 콜백 함수가 어떻게 작동하는지 생각하면 도움이 될 것이다. 

 

그래서 엘리먼트들의 가계도가 A-B-C-D-E 형태로 내려올때 A의 state를  E에서 변경해야 한다면 A의 props을 B로 전달하고 다시 C로, 그리고 D로 전달하고 마지막 E에서 전달해야 되는 어쩔 수 없는 비효율이 생긴다. 이를 data property drilling이라고 한다. 이를 해결하기 위해 Redux를 실무에선 많이 사용한다고 한다. (아니면 hooks를 사용하기도 한다.) Redux에선 하나의 storage에서 모든 상태를 관리할 수 있기 때문에 중간의 위치한 컴포넌트들을 모두 뚫어서 props을 전달해 줄 필요가 없다. 

Lifecycle

React lifecycle diagram

클래스로 만들어진 리액트 컴포넌트의 경우 lifecycle(생명주기)와 관련된 메소드들을 사용할 수 있고 이를 통해 컴포넌트에 생명주기를 부여할 수 있다. 코드 스테이츠 엔지니어분께서는 각각의 메소드를 componentDidMount는 생명이 태어날 때, componentDidUpdate는 인생의 큰 사건을 마주했을 때, componentWillUnmount는 죽을 때라고 비유하셨는데 덕분에 이해가 좀 더 쉬워졌다. 

 

componentDidMount의 경우 컴포넌트가 마운트된 후 바로 실행되기 때문에 DOM환경이 구축된 후 함수가 실행돼야 할 때 해당 메소드를 사용한다. 보통 data를 fetch 하거나 setInterval, setTimeout과 같은 비동기 함수들을 사용할 때 쓰인다. 

componentDidUpdate는 컴포넌트가 갱신될 때 호출되는데 보통 메소드안에 조건문을 넣고 그 조건문에서 이전 props의 상태와 현재 props의 상태를 비교하고 달라졌다면 다음 함수를 실행하는 방법으로 쓰인다. 조건문을 쓰지 않고 setState를 바로 실행한다면 컴포넌트가 업데이트되었기 때문에 다시 해당 메소드가 호출되면서 무한 루프에 빠질 수 있으니 주의해야 한다. 

componentWillUnmount는 컴포넌트가 DOM에서 삭제된 시점에서 실행되는 메소드로 비동기 API나 타이머들을 실행 종료할 때 사용된다.

Functional Component vs Class Component

함수형 컴포넌트는 말 그대로 함수 형태로 구성된 리액트 컴포넌트로 JSX 문법을 이용해 리액트 엘리먼트를 반환한다. 클래스형보다 선언하기 쉽고 메모리 자원을 클래스형보다 덜 소모하지만 클래스형 컴포넌트처럼 state나 lifecycle을 사용할 수 없다. 하지만 2019년에 React에 함수형 컴포넌트에서만 사용 가능한 hooks라는 기능이 업데이트되면서 함수형 컴포넌트의 사용이 늘고 있다고 한다. 

 

클래스형 컴포넌트에서는 앞서 말했듯 state와 lifecycle 기능을 사용할 수 있으며 extends를 사용해 React Component를 물려받는다. render 메소드를 따로 만들어야 리액트 엘리먼트를 렌더링 할 수 있다.