React | Component (리액트 컴포넌트)

Ryan·2020년 11월 2일
0

React

목록 보기
3/8
post-thumbnail

리액트에서 component(컴포넌트)란 재사용 가능한 UI 단위를 뜻한다.
리액트는 컴포넌트로 구성되어 있다고 해도 과언이 아니다.
컴포넌트가 무엇인지 알아보자.

1. Component

: 프론트앤드 개발에서 Component 라는 단어를 많이 사용한다.
로그인, 회원가입 페이지 등등 아이디와 패스워드를 받는 input 요소가 필요하다고 했을 때, 각각의 페이지에서 동일한 코드가 아마 많이 반복 될 것이다.
(input,button,div 등등 HTML, 그것을 꾸며주는 CSS, 기능을 작동시킬 JS.... 등등)
이런 것을 단 한개만 만들어두고 필요한 곳에서 이것을 필요한 곳에서 뽑아 쓸 수 있게 만들어 주면 얼마나 코드가 줄어들까.
바로 이런 작게 잘라둔 단위를 컴포넌트라고 한다.
즉, 컴포넌트는 독립적이다.


2. Component 특징

  • 재활용하여 사용할 수 있다.
  • 코드의 유지보수에 좋다.
  • 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악이 된다.
  • 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다.(부모 컴포넌트, 자식 컴포넌트)
  • 하나의 컴포넌트에서 HTML, CSS, JS를 모두 포함시켜 만들 수 있다.
  • 컴포넌트는 함수와 닮아있다. (input을 props, return은 React요소가 리턴됨)

3. Component 종류

: 컴포넌트는 2종류가 있다.
두 종류가 장단점이 있으니 모두 알아 두어야한다.

// Class형 컴포넌트
class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}
// Fuction형 컴포넌트
class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}

2. Component 만들기

: 컴포넌트는 함수형 클래스형 모두 만들 수 있다.

1) 함수로 Component 만들기

function Welcome(props) {
  return (<h1>Hello, {props.name}</h1>); /*JSX 형식을 불러와 준다.*/
}

2) 클래스로 Component 만들기

class Welcome extends React.Component {
  render() {                                  /*render() 는 필수다.*/
    return <h1>Hello, {this.props.name}</h1>; /*return도 필수다.*/
  }
}
  • 여기서 컴포넌트의 이름은 Welcome이 된다.

3. Component 사용하기

: 컴포넌트는 사용하기 위해서는 부모 컴포넌트와 자식간의 연결이 되어야한다.

1) 자식 컴포넌트

class 컴포넌트이름 extends React.Component {
  render() { 
    return <h1>Hello, {this.props.name}</h1>; 
  }
}

export default 컴포넌트이름; // export 를 해야 다른 곳에서 쓸 수 있다.
  • 자식 컴포넌트에서는 부모컴포넌트에서 사용할 수 있도록 export를 해주어야한다.

2) 부모 컴포넌트

import '자식 컴포넌트를 사용할 이름' from '자식 컴포넌트의 경로';

class Main extends Component {
  render() {
    return (
      <컴포넌트 이름 />
    )
  • 부모 컴포넌트에서 자식 컴포넌트를 사용하기 위해 import해준다.
  • 랜더 안쪽에 컴포넌트 이름을 넣기만 하면 해당 부분에 자식 컴포넌트 부분을 렌더할 수 있다.

4. Component Lifecycle

: constructor → render → componentDidMount → ( setState ) → render

  • 컴포넌트가 렌더가 일어난 이후에 componentDidMount가 실행이 된다.
  • 이때 State에 변화가 있다면 다시 재렌더가 일어난다.
profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글