ReactJS Component 101

12 Aug 2020

Reading time ~3 minutes

ReactJS Component 101

3.component 101 from Daniel Lim

bg right h:270 임광규

TODO Component 구조

TODO 보기

bg h:700

함수 컴포넌트

함수를 이용하여 컴포넌트 생성

import React from "react";
import "./styles.css";

export default function App(props) {
  return (
    <h1>Hello, {props.name || "New"}</h1>
  );
}

클래스 컴포넌트

클래스를 이용하여 컴포넌트 생성

import * as React from "react";
import "./styles.css";

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

함수 컴포넌트 VS 클래스 컴포넌트

리액트 공식 매뉴얼에서는 함수 컴포넌트와 Hooks를 사용하도록 권장

### 함수형 컴포넌트 장점

클래스 컴포넌트보다 선언이 쉽다.
메모리 자원도 클래스 컴포넌트보다 덜 사용한다.
결과물의 파일크기가 더 작다.

### 함수형 컴포넌트 단점들

state와 라이프 사이클 API 사용이 불가능
- ReactJS 16.8 이후 Hooks 기능이 도입되면서 대부분 해결됨

화살표 함수

function 키워드 를 사용하는 대신에 () => {} 를 사용하여 함수 생성 ES6에 도입된 화살표 함수 문법

화살표 함수의 특징

화살표 함수는 오직 익명 함수 이다. ==> 표현식만 사용 가능
화살표 함수는 상위 환경의 this를 계승 받는다.

모듈 내보내기(export) 불러오기(import)

내보내기

export default MyComponent;

불러오기

import MyComponent from './MyComponent';

props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 props 값은 해당 컴포는트를 불러와 사용하는 부모 컴포넌트에서 설정

props 사용

export default (props) => <div>{props.name}</div>

props 설정

import MyComponent from './MyComponent';

export default () => <Mycomponent name="K" />

defaultProps

props의 기본값을 설정하는 방법

import React from 'react'
const MyComponent =  (props) => <div>{props.name}</div>

MyComponent.defaultProps = {
  name: '기본 이름'
}

export default MyComponent;

children

컴포넌트 태그 사이의 내용을 보여주는 props

import MyComponent from './MyComponent';

export default () => <Mycomponent name="K" >동감</MyComponent>

import React from 'react'
const MyComponent =  (props) => (<div>
                    이름은 {props.name}<br />
                    children은 {props.children}
                  </div>);
export default MyComponent;

비구조화 할당을 통한 props 내부 값 추출

import React from 'react'
const MyComponent =  ({name, children}) => (<div>
                    이름은 {name}<br />
                    children은 {children}
                  </div>);
export default MyComponent;

propTypes를 통한 props 검증

값의 타입, 필수 여부 등을 확인 후 경고 더욱 자세한 내용 참조

import React from 'react'
const MyComponent =  ({name, children}) => (<div>
                    이름은 {name}<br />
                    children은 {children}
                  </div>);
MyComponent.defaultProps = {
  name: "기본이름"
};
MyComponent.prototype = {
   // name: PropTypes.string, // 타입만 선언 하는 경우
  name: PropTypes.string.isRequired, // 타입 선언 + 필수 처리
};
export default MyComponent;

state

state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미 props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며 props를 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 함

import React from 'react';
export default (props) => {
  const [name, setName] = React.useState('K');
  return (<div>
      {name} <br />
      <button onClick={() => setName('L')} >변경</button> 
    </div>);
}

state를 사용시 주의점

useState를 통해 전달받은 setter 함수를 사용해야 한다

// 잘못된 사용법
const [name, setName] = React.useState({ a: "K" });
name.a = "C";

배열이나 객체를 업데이트 할때 사본을 만들고 사본값에 업데이트 후 setter를 통해 변경한다.
```
const obj = {a:1, b:2, c:3};
const newObj = {...obj, b:4}; // 사본을 만들고 b 값만 변경 처리
```

props VS state

props와 state는 둘다 컴포넌트에서 사용하거나 랜더링 할 데이터를 담고 있으나 역활이 다르다.

props는 `부모 컴포넌트가 설정`

state는 `컴포넌트가 자체적으로 지닌 값으로 내부에서 업데이트`

뽀나스

참고 자료

[자바스크립트] arrow function과 this

reactjs