[TIL] React 공부일기 #2

함수형 컴포넌트

장점 : 클래스형 컴포넌트보다 선언하기 훨씬 편함. 메모리 자원도 보다 적게 사용함.

클래스형 컴포넌트

render 함수를 꼭 넣어야 됨!

장점 : state 기능 및 라이프사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있다. (업데이트 이후 함수형 컴포넌트도 사용할 수 있게 되었다)

Props

properties를 줄인 표현으로, 컴포넌트 속성을 설정할 때 사용하는 요소. 이 값은 부모 컴포넌트에서 설정할 수 있다.

propTypes

아래의 코드를 보면 import PropTypes from 'prop-types'로 선언함을 알 수 있다. 컴포넌트의 필수 props를 지정하거나, props의 타입을 지정할 때 사용한다. 여러 가지 종류를 설정할 수 있다.

Props - 함수형 컴포넌트

import React from 'react';
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;

Props - 클래스형 컴포넌트

클래스형 컴포넌트에서 props를 사용할 때는
render 함수에서 this.props를 조회하면 된다.

import React, {Component} from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
    render(){
        const { name, children, FavoriteNumber } = this.props;
        return (
            <div>
                내 이름은 {name}이고<br/>
                children 은 {children}입니다.<br/>
                제가 좋아하는 숫자는 {FavoriteNumber}입니다.
            </div>
        )
    }
}
MyComponent.defaultProps = {
    name:'기본 이름'
};
MyComponent.propTypes = {
    name:PropTypes.string,
    FavoriteNumber:PropTypes.number.isRequired    
};
export default MyComponent;

state

state란?
컴포넌트 내부에서 바뀔 수 있는 값을 의미함.

state - 함수형 컴포넌트

useState 라는 함수를 사용한다. (Hooks라는게 사용되는데 다음에 자세히 공부한다!)

useState 함수

const [var1,var2] = useState('')
함수의 인자에 초기값(아무값이나 상관없음)을 넣어 준다.
var1은 현재 상태가 저장되고,
var2는 상태를 바꾸어 주는 함수다. (이를 세터(setter) 함수라고 부른다!)

예제 :

import React, {useState} from 'react';

const Say = () => {
    const [message, setMessage] = useState('');
    const btn1 = () => setMessage('안녕하세요!');
    const btn2 = () => setMessage('안녕히 가세요!');
    const [color, setColor] = useState('black');
    
    return (
        <div>
            <button onClick={btn1}>입장</button>
            <button onClick={btn2}>퇴장</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;

state - 클래스형 컴포넌트

setState 라는 함수로 state의 값을 변경한다.

state를 조회할 때엔 this.state로 조회한다!
this.setState() 를 사용하여 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(asdf => { return {number:asdf.number+1} })
                    this.setState(asdf => ({number:asdf.number+1}))
                    console.log('방금 setState가 호출되었습니다!');
                    console.log(this.state)
                }}>+1</button>
            </div>
        )
    }
}
export default Counter;

Constructor 와 super 메소드를 써서 state의 초깃값을 지정해 줄 수도 있다. (그러나 위에 코드로 지정하는 방식이 제일 편하다)

정리! props / state

props와 state는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어 비슷해 보일 수 있지만, 그 역할은 매우 다르다!

props : 컴포넌트 속성값 / 부모 컴포넌트가 설정
state : 컴포넌트 상태값 / 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 가능

기타(etc) :

JSX에서 style 적용할때 주의!!
<h1 style={color}> 는 오류다!
<h1 style={{color}}> 로 써야 맞다!

{ } 하나만 쓰면 이런 오류가 뜨더라..
Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

비구조화 할당 문법

(오른쪽이 비구조화 할당 문법이다)

배열 비구조화 할당

const array = [1,2]
const [one, two] = array;

오류 발생시

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

클래스형 컴포넌트에서 이런 오류가 발생한다?
렌더 될 때마다 함수를 호출해 무한루프가 발생해서 그렇다!
자세한건 https://kss7547.tistory.com/36 이분 블로그를 참조

오류 코드 :

<button onClick={this.setState({num1:num1+1})}>증가</button>

해결방안 :

<button onClick={ () => this.setState({num1:num1+1})}>증가</button>

책 예제 이미지만 보고 코드 짜보기! 복습이 필요하다!

책 - 리액트를 다루는 기술(개정판) | 김민준 | 길벗