[REACT] Component

클래스형 컴포넌트 

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

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

export default App;

 

클래스형 컴포넌트와 함수 컴포넌트의 차이점 : 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프 사이클 기능 사용 가능, 임의 메서드 정의 가능 

클래스형 컴포넌트에서는 render 함수가 꼭 있어야하고, 그 안에서 보여 주어야 할 JSX 반환해야 함. 

보통 함수 컴포넌트와 Hooks 사용 권장, 그치만 일단 알아두자.. 

 

const MyComponent = () => { //화살표 함수 문법 
    return <div> 나는 새삥 </div>;

};

export default MyComponent;

function 키워드 사용 안하고 화살표 문법 사용 가능

import MyComponent from './MyComponent';

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

export default App;

import 하기.

 

---

 

JSX 내부에서 props 렌더링

const MyComponent = props => { //화살표 함수 문법 
    return <div> 하이, 내 이름은 {props.name}임! </div>;

};

export default MyComponent;

 

import MyComponent from './MyComponent';

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

export default App;

props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용 가능

 

 

props 기본 값 설정 : defaultProps

const MyComponent = props => { //화살표 함수 문법 
    return <div> 하이, 내 이름은 {props.name}임! </div>;
};

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

export default MyComponent;

import MyComponent from './MyComponent';

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

export default App;

props 값을 따로 지정하지 않았을 때 보여줄 기본값 설정 

 

 

children

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

export default App;

const MyComponent = props => { 
    return(
        <div>
            하이 내 이름은 {props.name}! <br />
            children 값은 {props.children} 임.
        </div>
    )
};

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

export default MyComponent;

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

 

const MyComponent = props => { 
    const {name, children} = props;
    return(
        <div>
            하이 내 이름은 {name}! <br />
            children 값은 {children} 임.
        </div>
    )
};

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

export default MyComponent;

비구조화 할당을 통해서 더 짧은 코드로 사용. 

 

const MyComponent = ({name, children}) => { 
    return(
        <div>
            하이 내 이름은 {name}! <br />
            children 값은 {children} 임.
        </div>
    )
};

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

export default MyComponent;

더 깔끔한 버전 

 

propTypes를 통한 props 검증

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;

name 값은 무조건 string 형태로 전달해야 된다는 것 의미. 

 

 

PropTypes.isRequired

import PropTypes from 'prop-types';

const MyComponent = ({name, children, favoriteNumber}) => { 
    return(
        <div>
            하이 내 이름은 {name}! <br />
            children 값은 {children} 임. <br />
            제일 좋아하는 숫자는 {favoriteNumber}임.
        </div>
    )
};

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

MyComponent.propTypes={
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name="React" favoriteNumber={1} >리액트</MyComponent>;
};

export default App;

propTypes 지정하지 않았을 때 경고 메시지 띄워 줌

 

---

 

state : 컴포넌트 내부에서 바뀔 수 있는 값

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 가능.

props 바꾸려면 부모 컴포넌트에서 바꾸어 주어야 함. 

 

import React, {Component} from "react";

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

export default Counter;

 

constructor (props){
        super(props);
        this.state = {number : 0};
    }

컴포넌트의 생성자 메서드. 클래스형 컴포넌트에서 constructor 작성 시 반드시 super(props) 호출.

이 함수 호출되면 현재 클래스형 컴포넌트가 상속 받고 있는 리액트의 Component 클래스가 지닌 생성자 함수 호출 

 

render(){
        const {number} = this.state; //state 조회할 때는 this.state로 조회
        return(
            <div>
                <h1>{number}</h1>
                <button
                    //onclick을 통해 버튼이 클릭 되었을 때 호출할 함수 지정 
                    onClick={() => {
                        //this.setState 통하여 state에 새로운 값 넣기 가능 
                        this.setState ({ number : number+1});
                    }}>
                        +1
                </button>
            </div>
        );
    }

import Counter from "./Counter";

const App = () =>{
  return <Counter />;
};

export default App;

숫자가 1씩 카운트업 됨. 

 

import React, {Component} from "react";

class Counter extends Component{
    constructor (props){
        super(props);
        this.state = {number : 0, fixedNumber : 0};
    }
    render(){
        const {number, fixedNumber} = this.state; 
        return(
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값 : {fixedNumber}</h2>
                <button 
                    onClick={() => {
                        this.setState ({ number : number+1});
                    }}>
                        +1
                </button>
            </div>
        );
    }
}

export default Counter;

state 객체 안에 여러 값이 있을 때 위와 같은 방법으로 수정하면 됨 

 

state = {
        number : 0,
        fixedNumber : 0
    }

Constructor 사용하지 않고도 state 초깃값 설정하는 방법. 

 

import React, {Component} from "react";

class Counter extends Component{
    state = {
        number : 0,
        fixedNumber : 0
    }
    render(){
        const {number, fixedNumber} = this.state; 
        return(
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값 : {fixedNumber}</h2>
                <button 
                    onClick={() => {
                        this.setState(prevState=> {
                            return{
                                number : prevState.number + 1
                            };
                        });
                        this.setState(prevState=> ({
                            number : prevState.number + 1
                        }));
                    }}>
                        +1
                </button>
            </div>
        );
    }
}

export default Counter;

만약 숫자를 2씩 증가시키고 싶다면 this.setState를 사용할 때 객체 대신에 함수 인자로 넣어줌. 

 

<button 
                    onClick={() => {
                        this.setState({
                            number: number+1
                        }, ()=>{
                            console.log('방금 setState가 호출 되었습니다.');
                            console.log(this.state);
                        });
                    }}>
                        +1
                </button>

콜백 함수를 등록

 

 

Hooks (useState)

import React, {useState} from "react";

const Say = () =>{
    const [message, setMessage] = useState(''); //배열 비구조화 할당
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');

    return (
        <div>
            <button onClick={onClickEnter}> 입장 </button>
            <button onClick={onClickLeave}> 퇴장 </button>
            <h1> {message} </h1>
        </div>
    );

};

export default Say;

Unstate 함수의 인자에는 상태의 초깃값 넣어준다. useState에서의 state 초깃값은 반드시 객체가 아니어도 상관없음. 값의 형태가 자유롭다. 

배열의 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꾸어주는 함수 - Setter 함수 

이름은 자유롭게 설정 가능하다. 

 

import React, {useState} from "react";

const Say = () =>{
    const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히 가세요!');

    const [color, setColor] = useState('black');

    return (
        <div>
            <button onClick={onClickEnter}> 입장 </button>
            <button onClick={onClickLeave}> 퇴장 </button>
            <h1 style={ {color}}> {message} </h1>

            <button style={{ color: 'red'}} onClick={() => setColor('red')}>
                빨간색 
            </button>

            <button style={{ color: 'green'}} onClick={() => setColor('green')}>
                초록색 
            </button>

            <button style={{ color: 'blue'}} onClick={() => setColor('blue')}>
                파란색 
            </button>
        </div>
    );

};

export default Say;

useState는 한 컴포넌트에서 여러번 사용해도 상관없음. 

 

*정리

props : 부모 컴포넌트가 설정 

state : 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 가능.