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
서원석
의 학습노트
리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현
Video
⏱ 핵심 스탬프8개
00:00
해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다.
공식 문서: https://reactrouter.com/
00:50
react router 버전5에서 redirect를 구현하는 방법입니다.
*예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨
*특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.
👍
4
👋 다양한 인사이트를
읽어보고 계신가요?
나만의 학습 기록을 남기고,
관리하고 싶다면!
다양한 전문가의 멤버십 전용
콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고,
수익을 올리고 싶다면!
3초 회원가입/로그인으로,
런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기