[React] component

사전 스터디 팀원분들이 되게 열심히 하신다. 왠지 나까지 좋은 기분,,, 다들 화이팅🔥

1. Component 란?

일단 컴포넌트라는 용어에 대해 먼저 알아보면
cs에서 다룰때는 하드웨어처럼 "독립적인 기능을 수행하는 단위 모듈"을 뜻한다.

소프트웨어는 하드웨어랑 달리 독립적으로 개발되지 않는 경우가 많고, 다른 모듈과의 호환을 생각하며 개발하지 않았다. 그래서 재사용뿐만 아니라 유지보수도 어려웠다.

하지만 소프트웨어의 재사용성을 높히고 유지보수를 용이하게 하게 위해 나온 기술이 바로 컴포넌트(Component)이다.

2. React에서 Component

리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다.
또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다.
이러한 컴포넌트들이 유기적으로 잘 연결되고 동작되어야 훨씬 효율적인 앱이 될 수 있다.

리액트 컴포넌트의 props와 state는 무엇일까 ?
컴포넌트는 기본적으로 두 가지 인스턴스 속성으로 props와 state를 갖고 있다.

props

• 어떠한 값을 컴포넌트에 전달해줄때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다.

state

• 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 특히 동적인 데이터를 다룰 땐 state를 사용한다.

이러한 기능을 통해 컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고 받고 변경되는 값은 state만큼만 확인하면 되므로 좀 더 편하게 개발을 할 수 있게 된다.

3. Component의 lifeCycle

모든 컴포넌트는 여러 종류의 생명주기 메소드를 가진다.
이러한 메소드를 활용하여 특정 시점에 원하는 코드가 실행될 수 있도록 설정할 수 있다.

3-1. mount

컴포넌트의 인스턴스가 생성되어 DOM에 삽입될 때 순서대로 호출된다.

1. constructor
2. static getDerivedStateFromProps()
3. render()
4. componentDidMount();

3-2. update

props 또는 state가 변경되면 갱신이 발생한다. 컴포넌트가 리렌더링 될 때 순서대로 호출된다.

1. static getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
   5.componentDidUpdate()

3-3. 마운트 해제

컴포넌트가 DOM에서 제거될 때 호출된다.
1. componentWillUnmount()

자주 사용이 되는 함수 !!

• render()
  • 클래스형 컴포넌트에서 반드시 구현해야하는 유일한 메서드이다. props와 state 값을 활용하여 값을 반환한다.
  • 컴포넌트의 state를 변경하지 않고, 호출될 떄마다 동일한 결과를 반환해야하며, 브라우저와 직접 상호작용 하지 않는다.
  • shouldCOmponentUpdate()가 false를 반환하면 호출되지 않는다.
• constructor(props)
  • 메서드를 바인딩하거나 state를 초기화하는 작업에서 사용된다.
• componentDidMount()
  • 컴포넌트가 마운트 된 직후 호출된다.
  • DOM 노드가 필요한 초기화 작업을 수행한다.
• componentDidUpdate(precProps, prevState, snapshot)
  • 갱신이 일어나고 바로 뒤 호출되며 최초 렌더링에서는 호출되지 않는다.
  • 컴포넌트 갱신시 DOM을 조작할떄 사용한다.
• componentWillUnmount()
  • 컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.

4. Component의 종류

리액트에서 정의하는 컴포넌트 종류에는 크게 함수형 컴포넌트 클래스형 컴포넌트 2가지가 있다.

함수형 컴포넌트

function Welcome(){
	return <h1>Hello, {props.name}</h1>;
}

데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환한다.
이러한 컴포넌트는 Javascript 함수이기 때문에 말그대로 함수형 컴포넌트라고 불린다.

클래스형 컴포넌트

class Welcome extends React.Component {
	render(){
    	return <h1>Hello, {this.props.name}</h1>;
    }
}

클래스형 컴포넌트에선 render()가 필수적이고 함수형 컴포넌트로 하지 못하는 작업을 처리할 떄 ES6문법에 class를 사용한 "클래스형 컴포넌트"를 활용한다.