2023.08.21(월) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week1 Day 1 보고

• TO-DO LIST

- 24강 Big Picture ~ 28강 리액트 상태 - 4 - Form Input

- 17:00 정기 팀 회의

​

• 배운 내용 요약 정리

이벤트: 프로그래밍하고 있는 시스템에서 일어나는 사건 action 혹은 발생 occurance

​

- 이벤트 핸들러

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

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

​

HTMLButtonElement

버튼에는 어떤 이벤트 핸들러가 있을까?

The HTMLButtonElement interface provides properties and methods (beyond the regular HTMLElement interface

it also has available to it by inheritance) for manipulating <button> elements.

​

- 이벤트 리스너

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

이벤드 리스너에는 DOM 요소가 필요하다.

JavaScript : .addEventListener() 메서드

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

​

- 컴포넌트 함수

컴포넌트는 하나의 함수

처음에 렌더링이 될 때 모든 컴포넌트 함수는 실행이 완료된다.

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

컴포넌트 내의 로컬 변수들은 컴포넌트 업데이트를 해주지 않는다.

​

컴포넌트 업데이트

- state

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

state, props -> 값이 바뀔 때마다 컴포넌트는 업데이트

​

https://react.dev/learn/updating-objects-in-state

Updating Objects in State – React

 

​useState

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

1. 해당 컴포넌트 안에서만 사용할 수 있다.
2. cosnt [state, setState] = useState(initialState)와 같이 사용

​

(예시)

const Toast = ({message}) => {

const [text, setText] = useState('sample')

const buttonClickHandler = (title) => {

setText("changed!");

console.log(title);

};

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

useState – React

 

userState is a React Hook that lets you add a state variable to your component.

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

​

State를 잘못 쓰면 컴포넌트 리렌더링이 많이 일어날 수 있음을 주의하기 ! !

​

- Form Input

The <input> HTML element is used to create interactive controls for web-based forms

in order to accept data from the user

​

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

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

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

onChange = (event) => {};

​

- 여러 개의 상태 다루기

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

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

​

여러 개의 상태 처리 시 각각 처리해 주어도 되고,

객체로 하나로 만들어서 처리해 주는 것도 가능

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고