Daily Coding - FE 3주차 - 25강 26강 27강

25강

Event Handler

이벤트가 발생되면 실행되는 코드 블럭을 말한다.

코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 이를 이벤트 핸들러를 등록(register)

Toast.js

const Toast = ({message}) => {

    const buttonClickHandler = () => {
        console.log('event occurs');
    };

    return(
    <div className={`toast toast-${message.title}`}>
        <ToastMessage message={message}></ToastMessage>
        <button className='toast__button' onClick={buttonClickHandler}>Dismiss</button>
    </div>
    );
};

 

EventLisner

이벤트를 듣는 메서드를 말한다.

이벤트 리스너에는 DOM 요소가 필요함

JavaScript => .addEventListener() 메서드를 사용

React => 컴포넌트에 직접 넣어줌 (e.g. onClisk = {} )

 

Toast.js

const Toast = ({message}) => {

    const buttonClickHandler = (title) => {
        console.log(title)
    }

    return(
    <div className={`toast toast-${message.title}`}>
        <ToastMessage message={message}></ToastMessage>
        <button className='toast__button' onClick={() => buttonClickHandler(message.title)}>Dismiss</button>
    </div>
    );
};

 

 

 

 

26강

컴포넌트 함수

컴포넌트 내에서 바뀔 때마다 항상 컴포넌트를 업데이트해줘야 함수가 반영이 됨.

//26강 컴포넌트 함수
const Toast = ({message}) => {
    let text = "sample"
    const buttonClickHandler = (title) => {
        text = "changed!"
        console.log(title)
    }

    return(
    <div className={`toast toast-${message.title}`}>
        <ToastMessage message={message}></ToastMessage>
        <p>{text}</p>
        // sample -> changed! 로 바뀌지 않음!
        
        <button className='toast__button' onClick={() => buttonClickHandler(message.title)}>Dismiss</button>
    </div>
    );
};

 

그래서 state와 props와 같은 아이들이 필요한 거임!

state, props -> 값이 바뀔 때마다 컴포넌트를 업데이트 해주는 아이들.

 

27강

useState

=> state를 업데이트 해주는 React 라이브러리에서 제공해주는 빌드인 훅

=> const [state, setState] = useState(initialState)

     *state : 사용자가 원하는 이름 아무거나 사용해도 무방

     *setState : set + 'State( 앞에서 지정한 이름을 카멜케이스로 기재)

     ex) const [message, setMessage]

 

=> 해당 컴포넌트 안에서만 사용할 수 있음 (컴포넌트 밖에서 선언도 사용도 불가!)

Toast.js
import React, {useState} from 'react';
import './Toast.css'
import ToastMessage from './ToastMessage';
import ToastButton from './ToastButton';

const Toast = ({message}) => {
    const [text, setText] = useState ("sample")
    const buttonClickHandler = (title) => {
        setText("changed!");
        console.log(title)
    }
    
        return(
    <div className={`toast toast-${message.title}`}>
        <ToastMessage message={message}></ToastMessage>
        <p>{text}</p>
        <button className='toast__button' onClick={() => buttonClickHandler(message.title)}>Dismiss</button>
    </div>
    );
};
    
    export default Toast;