working_helen

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 API로부터 데이터를 받아오고, 해당 데이터를 입력으로 사용하는 과정 구현하기 1. API에서 데이터 로드 2. API 데이터로 일기장 구성하기 1. API에서 데이터 로드 const getData = async()=>{ const res = await fetch("API 주소").then((res)=>res.json()); } useEffect(()=>{ getData();}, []) - asyc, wait, fetch 함수 → json 형태로 저장 - useEffect 빈배열 [] 이용 → 리액트가 Mount될 때 API 호출 실행 2. API 데이터로 일기장 구성하기 - {JSON} ..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 useEffect를 이용해 컴포넌트의 Lifecycle에 따른 함수 실행 구현하기 1. React 컴포넌트의 Lifecycle 2. useEffect를 이용한 예외 처리 3. useEffect를 이용한 컴포넌트 조작 1. React 컴포넌트의 Lifecycle 1) Lifecycle 3가지 탄생 Mount : 컴포넌트가 화면에 나타나는 것 변화 Update/Re-rend : 컴포넌트가 변화하는 것 죽음 UnMount : 컴포넌트가 화변에서 사라짐 2) useEffect - React Hooks : Class형 컴포넌트가 가지고 있는 기능 중 함수형 컴포넌트에서 사용할 수 있는 기능 - Cl..

강의명 : 한입 크기로 잘라 먹는 리액트(React.js) - 섹션 5. React 기본 - 간단한 일기장 프로젝트 리액트 흐름에 따라 일기장 데이터 추가, 삭제, 수정 구현하기 1. Event & Data 흐름 2. 데이터 추가 : onCreate() 3. 데이터 삭제 : onDelete() 4. 데이터 수정 : isEdit, localContent, handleQuitEdit, handleEdit, onEdit 1. Event & Data 흐름 역방향 이벤트 흐름 : Event는 아래에서 위로 단방향 데이터 흐름 : Data는 위에서 아래로 - 공통 부모 App.js에서 [State 변수, State 변경 함수] 생성 - DiaryEditor는 App에서 props로 전달한 setData 함수 호출 ..