본문 바로가기

강의 실습159

React에서 API 호출하기 useEffect X fetch 1. React에서 API 호출하기 세부 목표) - useEffect 를 이용하여 컴포넌트 Mount 시점에 API 를 호출하고 해당 API 의 결과값을 일기 데이터의 초기값으로 이용하기 무료로 API 서비스를 제공하여 테스트 할 수 있도록 도와주는 JSON Placeholder 서비스를 이용한다. 구글에 'json placeholder' 를 검색하여 홈페이지에 접속한 뒤, Resources 의 '/comment' 에 접속한다. JSON 형태의 객체 배열이 나타나는데, 이 데이터를 사용하기 위해 URL 을 복사한다. 참고링크 : https://jsonplaceholder.typicode.com/comments App.js 컴포넌트가 Mount 될 때 API 를 호출하여 데.. 2024. 1. 21.
React Lifecycle 제어하기 - useEffect useEffect * Lifecycle = 생애주기 생애주기란? 일반적으로 시간의 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정 (설명 출처 : 국민 안정처) React 컴포넌트도 이런 생명주기 Lifecycle 을 갖는다. * React 컴포넌트의 생애주기 (생명주기) 탄생(화면에 나타나는 것) : Mount → 변화(업데이트(리렌더)) : Update → 죽음(화면에서 사라짐) : UnMount Task A (ex. 초기화 작업) → Task B (ex. 예외 처리 작업) → Task C (ex. 메모리 정리 작업) => 라이프 사이클을 제어한다(이용한다) : 컴포넌트 생애주기 별로 작업 수행시킬 수 있다. * React Component Lifecycle Methids Mount .. 2024. 1. 20.
React에서 배열 사용하기 4 - 데이터 수정하기 UPDATE 1. React에서 리스트 데이터 수정하기 세부 목표) - 배열을 이용한 React 의 List 에 아이템을 동적으로 수정 해보기 - With 조건부 렌더링 delete 는 취소의 의미이므로, remove 로 함수명을 바꿔본다. - App.js import { useRef, useState } from 'react'; import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; // 임시 배열 데이터 /* const dummyList = [ { id: 1 , author: '송진성' , content: '하이 1' , emotion: 5 , created_date: new Dat.. 2024. 1. 18.
React에서 배열 사용하기 3 - 데이터 삭제하기 DELETE 1. React에서 리스트 데이터 삭제하기 각 리스트 데이터에 삭제버튼을 만들고 클릭하면 삭제되도록 구현한다. 먼저 삭제버튼을 추가한다. - DiaryItem.js const DiaryItem = ({ author, content, created_date, emotion, id }) => { return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(created_date).toLocaleString()} {content} { console.log(id); }} > 삭제하기 ); }; export default DiaryItem; 삭제 버튼을 클릭하면 해당 리스트 데이터의 id 가 출력되는 것을 확인할 수 있다. 삭제 버튼을 클릭하면 삭제되는 데이터 빼고 .. 2024. 1. 17.
React에서 배열 사용하기 2 - 데이터 추가하기 CREATE 1. React에서 리스트 데이터 추가하기 세부 목표) - 배열을 이용한 React 의 List 에 아이템을 동적으로 추가해보기. - With React 처럼 생각하기 * 컴포넌트 & 데이터 구조 생각해보기 리액트는 같은 레벨 간의 컴포넌트끼리 데이터를 주고 받는 일이 불가능하다. 윗 계층에서 아래 계층으로만 데이터를 보낼 수 있다. 즉 React 는 단방향으로만 데이터가 흐른다. 같은 계층으로 데이터를 주고받으려면, 각 컴포넌트의 state 를 공통 부모요소로 끌어올려 해결 가능하다. 일기장 프로젝트에 적용하면, App.js(부모 컴포넌트)에서 배열형식의 state 를 가지고 있고, props 로 각 자식컴포넌트인 DiaryList 와 DiaryEditor 에 데이터를 전달한다. Diary.. 2024. 1. 16.
React에서 배열 사용하기 1 - 리스트 렌더링 (조회) Array.map((it) => ) 1. React에서 리스트 렌더링 하기 세부 목표) - 배열을 이용하여 React 에서 LIST 를 렌더링 해보고 개별적인 컴포넌트로 만들어보기 - 터미널 npm start 랜더링 : 화면에 표시한다. 일기 리스트를 랜더링 할 컴포넌트 src\DiaryList.js 생성. - DiaryList.js const DiaryList = () => { return ( 일기 리스트 ); }; export default DiaryList; App.js 에도 등록 후, 임시 배열 데이터 생성 후 diaryList 라는 이름의 props 로 전달한다. 이후 DiaryList.js 에서 받기. - App.js import './App.css'; import DiaryEditor fro.. 2024. 1. 15.
React에서 DOM 조작하기 - useRef useRef 1. React에서 DOM 조작하기 세부 목표) - 일기 저장 버튼을 클릭했을 때 작성자와 일기가 정상적으로 입력되었는지 확인하고 아니라면 focus 하기 - 터미널 npm start 작성자를 1글자 이상 입력하지 않았을 때, 일기 본문을 5글자 이상 입력하지 않았을 때 alert 창 띄우고 함수 강제 종료시키기. - DiaryEditor.js import { useState } from "react"; const DiaryEditor = () => { // state 기본값 설정 const [state, setState] = useState({ author: "" , content: "" , emotion: 1 }) // 이벤트 함수 const handleChangeState = (e) =.. 2024. 1. 14.
React에서 사용자 입력 처리하기 useState with simple_diary 폴더 만든 후 vscode 에서 Open Folder 로 열기. (필요하면 zoom in) - 터미널 npx create-react-app simple_diary Creating a new React app in D:\개발\simple_diary\simple_diary. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1484 packages in 1m 250 packages are looking for funding run `npm fund` for details Git.. 2024. 1. 13.
프로젝트 소개 일기장 만들어보기 (One Page Application Project) 간단한 프로젝트를 통해 React의 사용법을 배워 보기 Point 1. 사용자 입력 및 배열 리스트 처리하기 Point 2. React Lifecycle 과 API Point 3. React App 프로처럼 성능 최적화하기 with 도구 사용 Point 4. React 컴포넌트 트리에 전역 데이터 공급하기 이번 섹션 완주하면, Todo 리스트, 심리 테스트, 랜딩 페이지 같은 간단한 One Page 프로젝트를 리액트를 통해 개발할 수 있는 실력 갖추게 된다. 참고강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8# 한입 크기로 잘라 먹.. 2024. 1. 11.

티스토리툴바