[React] 컴포넌트 & props 정리 및 생성하기

클래스형 컴포넌트

- 임의의 메서드를 정의 할 수 있음
- stat 기능 및 라이프사이클 메서드와 같은 기능 사용 가능 
- 리액트 v16.8 이후 Hooks라는 기능이 도입되면서 함수형 컴포넌트 사용을 권장

import React, { Component } from 'react'
import './App.css'

class App extends Component {
  render(){
    const name = 'react' 
    return <civ className='react'>{name}</civ>
  }
}

export default App​

 

함수형 컴포넌트

- 함수를 기반으로 작성하는 컴포넌트
- 클래스형 컴포넌트에 비해 훨씬 짧고 직관적인 코드를 짤 수 있음
- 함수형 프로그래밍을 할 수 있음
- Hooks가 도입되면서 함수형 컴포넌트에서도 클래스형 컴포넌트의 라이프사이클 메서드와 같은 기능 사용 가능
- 메모리 자원 클래스형보다 덜 사용
- 결과물의 크기가 클래스형 컴포넌트보다 작음

function App() {
  const name = "React"
  return (
    <div className="react">{name}</div>
  );
}

export default App;​

 

컴포넌트 생성 순서

1. src 폴더에 컴포넌트 파일 생성(MyComponent.js)

2. 코드 작성 및 모듈 내보내기(export)

3. App.js에서 모듈 불러와서(import) 사용

4. 출력 확인

props(properties)

- 상위 컴포넌트(부모)가 하위 컴포넌트(자식)에 값을 전달할 때 사용
- 단방향 데이터 흐름을 갖는 특성
- props는 자식에서 읽기 전용인 데이터(수정 불가) 

// MyComponent.js
import React from 'react'

const MyComponent = props => {
    return <div>자식 컴포넌트 {props.name} </div>
}

export default MyComponent

//App.js
import React from 'react'
import MyComponent from './MyComponent'

const App = () => {
  return <MyComponent name = 'React' />
}

export default App​

- defaultProps를 통해 기본값을 설정할 수 있음

// MyComponent.js
import React from 'react'

const MyComponent = props => {
    return <div>자식 컴포넌트 {props.name} </div>
}

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

export default MyComponent

//App.js
import React from 'react'
import MyComponent from './MyComponent'

const App = () => {
  return <MyComponent/>
}

export default App​

- 태그 사이의 내용을 보여주는 children props

//MyComponent.js
import React from 'react'

const MyComponent = props => {
  return (
  <div>
    자식 컴포넌트 {props.name} <br/>
    children 값 : {props.children}  
  </div>
)}

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

export default MyComponent

//App.js
import React from 'react'
import MyComponent from './MyComponent'

const App = () => {
  return <MyComponent>React</MyComponent>
}

export default App

- 비구조화 할당 문법을 통해 props 내부 값 추출 가능

//MyComponent.js
import React from 'react'

const MyComponent = ({name, children}) => {
  return (
  <div>
    자식 컴포넌트 {name} <br/>
    children 값 : {children}  
  </div>
)}

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

export default MyComponent

- propType를 통해 props의 타입을 지정하여 사용 가능
- 타입 지정시 지정 형태와 타입이 다를 시 콘솔에서 오류 메시지 출력

// MyComponent.js
import React from 'react'
import PropTypes from 'prop-types'

const MyComponent = ({name, children}) => {
  return (
  <div>
    자식 컴포넌트 {name} <br/>
    children 값 : {children}  
  </div>
)}

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

MyComponent.PropTypes = {
    name : PropTypes.string
}


export default MyComponent

state

컴포넌트 내부에서 바뀔 수 있는 값을 의미
props는 컴포넌트에 전달되기에 값을 바꿀 수 없지만, state는 직접 바꿀 수 있음

`숫자 증가 Counter 만들기`
`constructor 사용`
//Count.js
import React, { Component } from 'react'

class Count extends Component{
  constructor(props){
    super(props)
    this.state = {
        num : 0
    }
  }
  render(){
    const { num } = this.state
    return (
      <div>
        <h1>{num}</h1>
        <button onClick={() => {
            this.setState({ num: num +1})
        }}
        >+</button>
      </div>
    )
  }
}

export default Count

//App.js
import React from 'react'
import Count from './Count'

const App = () => {
  return <Count />
}

export default App​

`Constructor 사용하지 않는 방법`
//Count.js
import React, { Component } from 'react'

class Count extends Component{
  state = {
    num : 0
  }
  render(){
    const { num } = this.state
    return (
      <div>
        <h1>{num}</h1>
        <button onClick={() => {
            this.setState({ num: num +1})
        }}
        >+</button>
      </div>
    )
  }
}

export default Count