ReactJS - #5 기초 및 실습 (1주차)

Class Component

 

[Class.js]

import React, { Component} from 'react'

// state 기능 및 라이프 사이클 기능을 사용
// render 함수가 반드시 필요(class형 Component에서)

class ClassComponent extends Component{
    // 생성자 함수 
    // 생성자가 이유는 props나 state같은 상태값들을 초기화하기 위해서
    constructor(props){
        // constructor를 사용하면 항상 병용, this를 초기화, props를 넣어줘야 this.props 사용가능
        // suepr(props)를 통해서 this를 초기화 해주지 않으면 다른 component에서 사용했던 this와 충돌이 발생할 가능성이 있다.
        // super() 이렇게 props를 파라미터로 안주고도 할 수 있는데 그럼 props를 쓸 수가 없다. 
        super(props) 
        // initial state를 선언
        // this.state = {} 이 과정을 통해 component내의 render 함수에서 key값에 접근할때 this.state.key가 아닌 key로 접근가능
        this.state = {
            key : 'initialValue'
        }

        // event binding

        // this를 쓰기 위함이라고 생각하면 되는데 this에 묶여져 있는 event가 우리가 밑에 선언한 이벤트와 묶여서 바인딩이 된다 ?
        // 흠.. 잘 이해가 안되는데 근데 이건 Class Component에만 존재하고 function Component에는 없다.

        this.handleClick = this.handleClick.bind(this)
        console.log('constructor')
    }

    static defaultProps = {
        name : '홍길동'
    }

    handleClick(){
        // event binding을 안시켜놓으면 여기에서 this가 state를 가리키지 않아서 오류가 발생한다.
        this.setState({ key : 'value2'})
    }

    componentWillMount(){
        console.log('componentWillMount') // DOM이 생성되지 않은 단계, setState 실행 x
    }

    componentDidMount(){
        // 외부 데이터 가져오기
        // this.setState({})
        console.log('componentDidMount') // DOM이 생성된 단계, setState를 통해 DOM의 제어가 가능
    }

    componentWillReceiveProps(nextProps){
        console.log('componentWillReceiveProps');
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log('shouldComponentUpdate');
        return true;
    }

    componentDidUpdate(prevProps, prevState){
        console.log('componentDidUpdate');
    }

    // componentDidCatch(){
        // 에러 핸들링
    //}

    render(){
        // render() 함수를 통해 props를 조회
        // 비구조화 할당 방식으로 state와 props 사용 가능
        const { key } = this.state;
        const { name } = this.props;
        console.log('render')

        return(
            <div>
                <h1>클래스형 컴포넌트</h1>
                <h2>{ key }</h2>
                <h2>{ name }</h2>
                <button onClick={this.handleClick}>클릭</button>
            </div>   
        );
    }
}

export default ClassComponent;

* 메소드에 대한 세부내용은 주석 참고

---

 

Function Component

import {useState, useEffect} from 'react';

// state 기능 및 라이프 사이클 기능을 사용할 수 없음 (stateless) 그래서 hook이 나오기전까지 class Component 사용 권장
// 리액트 버전 16.8부터 Hook이 등장 -> state, lifeCycle 기능 대체가능
// 클래스형 컴포넌트보다 간단
// 클래스형 컴포넌트보다 메모리 자원을 적게 사용
// -> 최근에는 function Component 사용 권장

// 비구조화 할당으로 props 사용 가능

const FuntionalComponet = (props) =>{

    const [name, setName] = useState('홍길동');
    //     설정한 state, setState({key : value}) -> setKey(value)의 구조
    // useState('홍길동') -> initalize

    const handleClickBtn = (val) => {
        setName(val);
    }


    useEffect(() =>{
        console.log('component did update');
        // return () =>{
        //     console.log('component will mount');
        // }
    }, []);


    // Class Component와 다르게 render()가 없고 return으로 바로 들어감 
    //  return이라는 부분안에서 state같은 상태값들을 포함한 html 태그들을 사용하는게 JSX
    return (
        <div>
            <h1>함수형 컴포넌트</h1>
            <h2>{ name }</h2>
            <button onClick ={()=>setName('김철수')}>변경</button>

            {/* onClick={} 이안에 왜 에로우 펑션을 써야되나? */}
            {/* () => handleClickBtn('김철순') */}
            {/* handleClickBtn('김철순') */}
            {/* 위 두개의 차이점이 무엇인가 봤을때 파라미터로 어떤 값을 던져줄경우 반드시 funtion의 형태로 만들어줘야 하기때문에 ()=> fution('val') 의 형태로 만들어주어야 하고 */}
            {/* 파라미터가 없이 그냥 값을 가져오기만 하는 경우에는 handleClickBtn 까지 ()를 생략한 것을 onClick에 넣어주면 정상적으로 실행됨 */}
            <button onClick ={()=>handleClickBtn('김철순')}>변경</button>
        </div>
    )
}

export default FuntionalComponet;

* 세부 내용은 주석 참고

---

위의 function Componet를 세부적인 Component로 쪼개 보자!

 

components 폴더를 만들고 그 안에 name.js 파일을 만든다.

 

[name.js]

 

[functional.js]

이렇게 구조를 나눠주면 각각 다른 파일의 js이지만 한페이지에서 바꾸는 것처럼 페이지가 동작한다.

 

또한, button의 onClick에서 실행되는 callback funtion은 functional의 state 즉, 상위 component의 state를 바꾸는

 

funciton을 수행하는데, 이 상위의 component의 state를 바꾸는 것만으로도 하위의 Component에서 영향을 받아 

 

자동으로 수정되는 구조를 가진다.!!

 

---

 

주의해야 할 건 name.js에서 사용하는 props.name 같은 props는 수정할 수 없다는 점!

 

props의 값을 바꾸려면 부모 Component의 state를 수정해서 자식 Component가 받는 props의 값을 수정해야하는 

 

구조를 반드시 이해해야한다.

 

[name.js]

const NameComp = (props) => {

    const handelClickBtn = (val) =>{
        props.onClickCB(val)
    }
    return (
        <div>
        <h2>
            {props.name}    
        </h2>
         <button onClick={()=>handelClickBtn('하위 컴포넌트')}>변경</button>
        </div>
    );
}
export default NameComp;

 

[functional.js]

return (
        <div>
            <h1>함수형 컴포넌트</h1>
            {/* <h2>{ name } </h2> */}
            <Name name={ name }
                  onClickCB={handleClickBtn}/>
            <button onClick ={()=>setName('김철수')}>변경</button>

            {/* onClick={} 이안에 왜 에로우 펑션을 써야되나? */}
            {/* () => handleClickBtn('김철순') */}
            {/* handleClickBtn('김철순') */}
            {/* 위 두개의 차이점이 무엇인가 봤을때 파라미터로 어떤 값을 던져줄경우 반드시 funtion의 형태로 만들어줘야 하기때문에 ()=> fution('val') 의 형태로 만들어주어야 하고 */}
            {/* 파라미터가 없이 그냥 값을 가져오기만 하는 경우에는 handleClickBtn 까지 ()를 생략한 것을 onClick에 넣어주면 정상적으로 실행됨 */}
            <button onClick ={()=>handleClickBtn('김철순')}>변경</button>
        </div>
    )

 

이런식으로 상위 Component의 handleClickBtn이란 메소드를 하위 Component에 전달해서 하위 컴포넌트의 버튼을

 

클릭하면 상위 Component의 state를 수정하는 메소드가 작동하게 하는 구조!!

 

 

 

---

자 여기서 한번 정리해보자

 

react hook을 쓰려면 이렇게 import해주어야 되고

import { useState } from 'react';

 

 

 

하위 컴포넌트들을 사용하려면 상위 컴포넌트에서 import 해야하는데 

import Name from '../components/name';
import Job from '../components/job';

이렇게 import해주면 되는데 Component를 import 하기전에 필수적으로 선행되어야 하는 순서는

 

 

각각의 하위 component에서 export default를 선언해주어야 한다는 것이다.

export default JobComp;

 

또한 hook을 사용하는 구조는 

이런식으로 사용하게 되고 배열의 첫번째 인덱스에는 값이 저장될 장소, 두번째 인덱스는 저장된 값을 컨트롤하는 메소드이다.

 

 

 

또한

 

상위 컴포넌트에서 import한 하위컴포넌트를 사용할 때는 <Name /> 이런 형태로 사용하며

 

값을 직접 던져줄 수 있다.

 

그럼 이렇게 상위 component에서 던져준 job과 onClickCB를 props로 받게 되는데

 

밑의 코드에서는 비 구조 할당 방식으로 필요한 값들을 할당해서 사용하였다

 

또한 JSX에서는 html문과 함께 script 문도 사용할 수 있기 때문에 { } 안에서 아래와 같이 삼항연산자 따위의 script 문법들을

 

사용할 수 있다.!!