2024. 06. 04 (화) 6주차 - Daily Coding - Day02

 

 

 

27강

useState

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

*훅(hook)

: 리액트 v16.8버전부터 나온 기능이며 함수형 컴포넌트에서만 쓸 수 있는 함수로,

리액트의 lifecycle 기능을 연동(hook) 할 수 있다.

 

useState 특징

- 해당 컴포넌트 안에서만 사용할 수 있다. (컴포넌트 밖에서는 선언도 사용도 불가!)

- const [state, setState] = useState(initialState)와 같이 사용.

*state : state명, 원하는 문자 아무거나로 설정해도 무방

*setState : 앞의 state  를 바꿔주는 메서드 set + '앞의 state 명'으로 기재한다 (카멜케이스로 기재해야함!)

import React, { useState } from 'react'; 
import ToastMessage from './ToastMessage';


const Toast = ({message}) => {
    const [text, setText] = useState('화면에 보이는 문자')
    const buttonClickHandler = (title) => {
        setText("이벤트 발생 시 화면에서 변경되는 문자")
        console.log(title)
    };

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

export default Toast;

 

 

useState 주의할 점

State를 잘 못 쓰면 컴포넌트 리렌더링이 많이 일어날 수가 있음

복잡한 어플리케이션을 만들 수록 useState에 대해 사용에 주의가 필요

중첩된 구조(부모, 자식 컴포넌트가 있는 것)로 컴포넌트를 쪼개서 작업하는 리액트는 상위에서 state를 한 번 만 바꿔줘도 하위의 컴포넌트가 모두 리랜더링됨.

​

*참고자료

https://react.dev/learn/state-as-a-snapshot

State as a Snapshot – React

 

https://react.dev/reference/react/useState

useState – React

 

 

 

28강

- Form Input

- 여러 개의 상태 다루기

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

 

 

Form Input

<form> <input> tag를 통해 값을 입력할 수 있는 요소를 추가

데이터를 유저로부터 받을 수 있는 중요한 요소 중 하나

값을 입력 받을 땐 onChange 이벤트 리스너를 통해 변화를 감지

 

 

Form Input의 종류

1. button // input type='button'

2. checkbox //input type='checkbox' 선택할 때

3. color // 색깔 팔레트

4. date // 년.월.일 형태로 날짜 선택

5. file // 이미지 파일 업로드 할 때 사용

6. number 

7. text

8. password

9. radio // 무조건 단일 선택

10. submit

11. range

etc. 

 

이벤트 리스너

클릭 -> onClick

변화감지 -> onChanges

 

input 요소에서 변화를 감지 onChanges

HTMLElemnet change event

<input>요소를 실행할 때 사용할 수 있는 이벤트

사용 법 - onchange = (event 매개변수) => {}; 

 

 

여러 개의 상태 다루기

만약 객체인 state를 다룰 때 setState에서 state 값을 불러와서 쓰고 싶다면

setState(prevState => {...prevState});

  const [name, setName] = useState('');
  const [price, setPrice] = useState(0);
  const [today, setToday] = useState(null);
  
    const inputTypeTextChangeHandler = (event) => {
    setName(event.target.value);
  }
  const inputTypeNumberChangeHandler = (event) => {
    setPrice(event.target.value);
  }
  const inputTypeDateChangeHandler = (event) => {
    setToday(event.target.value);
  }

const [objectState, setObjectState] = useState({
    name: '',
    price: 0,
    today: null
  });
  
    const inputTypeTextChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, name: event.target.value}));
  }
  const inputTypeNumberChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, price: event.target.value}));
  }
  const inputTypeDateChangeHandler = (event) => {
    setObjectState(prevState => ({...prevState, today: event.target.value}));
  }