뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, [React hooks 이해] #1편. useState, useEffect
서원석님의 학습노트

useState, useEffect로 todo app 만들기 part 1

#전체
#개발자
#프론트엔드
#react
#hooks
#usestate
#useeffect
#리액트
01:14시작(여기서부터 재생해주세요)
02:11create-react-app으로 프로젝트 셋팅 완료
02:59클래스형 컴포넌트를 함수형 컴포넌트로 변경 완료 및 todo application 작성 시작 => 여기서부터 집중해야해요!
05:51useState 사용 시작
06:59리액트 컴포넌트에 props object가 넘어갑니다. => props의 property로 todos 전달 *props는 불변 데이터입니다. 자식 컴포넌트에서 변경할 수 없습니다. *React component: props라는 object를 입력으로 받고 React Element를 반환하는 자바스크립트 함수 *We recommend naming props from the component’s own point of view rather than the context in which it is being used.(출처: 리액트 공식문서)
07:03map을 사용해서 react element를 list 형태로 반환합니다. *map 결과가 react element의 배열형일 때 이것을 변수에 담아서 사용할지 {}에서 바로 map으로 표출할지는 사용자의 판단.(decide whether it is worth extracting a variable for readability.)
08:58관련 용어: form event handling, controlled component, event handling, event object *e is a synthetic event. React defines these synthetic events according to the W3C spec, so you don’t need to worry about cross-browser compatibility. React events do not work exactly the same as native events.(출처: 리액트 공식문서) *HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state. In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). We can combine the two by making the React state be the “single source of truth”.
10:07setNewTodo는 App 컴포넌트를 재호출시킵니다. *React는 setState 함수 동일성이 안정적이고 리렌더링 시에도 변경되지 않을 것이라는 것을 보장합니다. 이것이 useEffect나 useCallback 의존성 목록에 이 함수를 포함하지 않아도 무방한 이유입니다. *State Hook을 현재의 state와 동일한 값으로 갱신하는 경우 React는 자식을 렌더링 한다거나 무엇을 실행하는 것을 회피하고 그 처리를 종료합니다.(javascript의 Object.is로 비교합니다)
10:47state는 불변은 아니지만 불변 데이터처럼 다루는 것이 좋습니다. setTodos는 배열을 관리하고 todos.push('새로운 할일'); setTodos(todos); 식으로 코드를 작성하면 리렌더링이 되지 않습니다. setTodos는 같은 값이 들어올 경우 App 컴포넌트를 다시 호출시키지 않습니다.(array는 Object.is로 비교 시에 reference가 같으면 같다고 취급됩니다.)
12:41useEffect 사용 시작
13:17useEffect로 넘어간 side effect는 실제 dom이 update된 후에 비동기 방식으로 수행됩니다.
13:32useEffect에 의존성 배열 입력(newTodo)
14:31useEffect에 의존성 배열 입력(todos)
15:41끝(여기까지 시청해주세요)
✔ 학습 완료

이 학습노트가 포함된 러닝패스예요.

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기