Component

컴포넌트는 react를 함에 가장중요한 요소이다.

컴포넌트를 이해하지 않으면 react를 진행할 수 없다.

component란?

일단 정의는

재활용 가능한 UI 구성단위를 뜻한다.

component의 특징

멘토님들이 자주 말하는것 === 중요한것

1. 재활용하여 사용할 수 있다,.
2. 코드 유지보수에 좋다.
3. 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.
4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.

컴포넌트의 종류에는

Class 형 컴포넌트와 Function 형 컴포넌트가 있다.

import React from 'react'

class Component extends React.Component {
  render() {
    return (
			<div>
				<h1>This is Class Component!</h1>
			</div>
		)
  }
}

export default Component

근데 우선 먼저 배우는게 클래스형이니 클래스형만 적어놔야겠다 나중에 또 배우면 수정해야지.

위처럼 생겨먹은 구조가 클래스형 컴포넌트 이다.

class Component

클래스형으로 컴포넌트를 만드는데 이름은 Component로 하겠다는 의미고,

그아래 필수적인 요소로 render함수가 있다.

constructor → render → componentDidMount → ( setState ) → render

라는 라이프 사이클도 있다. 컴포넌트 안에 적힌 요소를 읽는 순서를 나타낸것이다.

위의 코드에는 랜더함수만 들어있지만 constructor 와 render 가 있으면 전자를 먼저 실행하고 랜더를 하게 된다.

자 노션에 있는것 보단 직접 작성하고 보는것이 더 좋을것같다

다음 게시물에...