2024. 06. 03 (월) 6주차 - Daily Coding - Day01

24강

- 리액트 상태

- 리스트 렌더링

- 스타일일 (인라인 css / css module / styled-component / tailwindcss)

- 디버깅 (작성한 코드에서 에러, 오류 확인 / 디버깅 시간 ⬆️)

- 실습 프로젝트

    form으로 값을 입력받기

    리스트로 보여주고

    에러가 발생할 경우 모달로 띄워주는 어플리케이션 (약 1시간 강의 분량)

 

 

25강

리액트 상태 Part 1.

- 이벤트 핸들러

- 이벤트 리스닝

 

이벤트란?

- 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurance)하는 상태를 말한다

 

이벤트 핸들러란?

- 이벤트가 발생되면 실행되는 코드 블럭(보통 프로그래머가 만드는 자바스크립트 함수)

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

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

    return (
        <div>
            <button className='toast__button'
            onClick={buttonClickHandler}>
                    Dismiss
            </button>
        </div>
    );
};

 

HTMLButtonElement

- EventTarget

- Node

- Element

- HTMLElement

- HTMLButtonElement

 

상속 (inherite)

HTMLElement(부모) > HTMLButtonElement(자식)

 

이벤트 리스러

- 이벤트(사용자의 행동)를 듣는 (지켜보는) 메서드

- 이벤트 리스너에는 DOM 요소가 필요하다

- JavaScript  => '.addEventListener( )' 메서드

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

 

https://github.com/dev-owen/react-fundamental/tree/practice/3-1

GitHub - dev-owen/react-fundamental: 슈퍼러닝 react 실습 repository

 

 

버튼이 눌렸을 때 console log 찍기.

const Toast = ({message}) => {

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

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

 

 

26강

리액트 상태 Part 2.

- 컴포넌트 함수

- state

 

컴포넌트 함수가 실행된 다음에 컴포넌트는 어떻게 되는지?

- 컴포넌트는 하나의 함수다 처음에 렌더링 될 때 모든 컴포넌트 함수는 실행이 완료되고,

   그 다음 컴포넌트 내에서 이벤트가 발생해도 컴포넌트 함수는 다시 실행되지 않는다.

 

state

state는 컴포넌트 내에서 바뀔 때마다 항상 컴포넌트를 업데이트 해줄 수 있는 값을 말한다.

state, props

=> 값이 바뀔 때 마다 컴포넌트는 업데이트가 된다.

=> 차이점 / state는 컴포넌트 안에서 조작된 값 / props 부모 > 자식 컴포넌트한테 값을 내려주어야 함