C-log

이전 시간에 우리는 useState가 동작되는 원리와 useState를 통해서 React DOM이 어떻게 동작하는지 알 수 있었다. 잠시 복기를 해본 다면 UI에서 변동 상항이 있으면 ReactDOM의 render를 통해서 변화된 UI를 변동 시켜야한다. 하지만 useState를 사용하지 않고 ReactDOM에 있는 render함수를 사용해서 변화가 필요한 함수나 부분에 매번 re-render를 하기엔 너무 불편하고 효율적이 못하다 그래서 상태가 변화 되었다는 것을 감지하고 이를 ReactDOM에 인지를 시켜주는 useState Hook을 사용해서 특정 상태가 변화 되었을 때 해당 컴포넌트가 re-render가 될 수 있는 것이다. 다시 말하지만 useState는 상태를 관리하는 Hook일 뿐 rende..

앞 시간에 우리는 React가 동작하는 원리를 React CDN을 사용해서 js로 풀어 나열 해보았다. js의 기본기가 있고 DOM에 대한 이해가 있다면 충분히 이해할 수 있는 포스팅이라고 본다. 이번 시간에는 useState의 동작원리를 살펴 볼 것이다. useState의 동작원리를 살펴보기 전에 우리가 알아야할 개념이 있다. 바로 React의 업데이트 메커니즘이다. 업데이트 메커니즘은 Virtual DOM을 활용해서 효율 적으로 UI를 업데이트 하는 방식이다. React는 상태 업데이트를 한번에 모아서(최적화를 위해서) 작업을 수행한다. 즉, 각기 useState 상태가 업데이트가 될 때마다 순차적으로 업데이트가 되는 방식이 아니라 모든 준비부터 완료가 될때까지 한번에 처리 하는 것이다. 여기서 다음..

프로젝트 수업에 들어가기 앞서 리액트의 jsx문법을 사용하지 않고 unpkg 사이트의 React npm에 등록된 CDN과 순수 js만을 이용해서 span 이 어떻게 생성되고 render되는지 한번 살펴보겠다. DOCTYPE html> Document const root = document.getElementById("root") const span = React.createElement( "span", { id: "my span", style: { color: "tomato", fontSize: "30px" } }, "Im New!" ); ReactDOM.render(span, root) 우선 HTML에서 div를 생성함과 동시에 div의 id 프로퍼티를 제공해야한다. 해당 id가 제공되면 getElem..

이번 시간에는 Header부분에 있는 단어 추가하기와 Day추가하기를 구현해 볼 것이다. 포스팅에 앞서 이전 시간에 우리는 fetch를 활용해서 계속해서 개발을 해왔다. 그만큼 API의 중요성을 느꼈을 것이며 이에 다른 custom Hook을 만들었다는 것을 잊지 말아야한다. 더 나아가 Js와 React의 차이가 무엇인지 생각해보면 좋을 듯하다. 이번에 생성할 컴포넌트들을 Route해야하기 때문에 App.js에서 Route를 설정해주자. ClassApp.js import Day from "./component/Day"; import DayList from "./component/DayList"; import Header from "./component/Header"; import EmptyPage fro..

이번 시간에는 PUT을 이용해 체크박스의 체크여부와 DELETE를 구현할 것이다. 이 모든 수행은 Word.js에서 이루어진기 때문에 Word컴포넌트를 살펴보자. import { useState } from "react"; export default function Word(props) { //state를 사용해서 각버튼과 상태를 표현하기 위해서 단어 부분을 따로 컴포넌트로 때어낸다. const [word, setWord] = useState(props.word)//삭제 상태 const [isShow, setIsShow] = useState(false); const [isDone, setIsDone] = useState(word.isDone); //버튼이 클릭 되었을 때 구현 function toggle..

우리가 전시간에 fetch를 내장한 useEffect를 이용했다. 이는 DayList컴포넌트와 Day컴포넌트에 모두 사용된다. 중첩되는 부분이고 이를 처리하기 위해서 우리들만의 Hook을 제작할 것이다. 아래 함수를 살펴보자. import { useState, useEffect } from "react"; export default function useFetch(url) { const [data, setData] = useState([]); useEffect(() => { fetch(url) .then(res => { return res.json(); }) .then(data => { setData(data); }); }, [url]); return data; } useFetch의 매개변수를 url로 ..

이전 시간에서는 우리가 json-server를 통해서 API를 가지고 왔다. 가지고온 이 API를 활용하기 위해서 기존에 import 했던 dummy data를 지우고 uesEffect를 사용해서 API로부터 데이터를 가지고 올 것이다. 우선 DayList.js 코드를 살펴보자. * DayList.js import { useState, useEffect } from "react"; import { Link } from "react-router-dom" export default function DayList() { const [days, setDays] = useState([]); useEffect(() => { fetch('http://localhost:3001/days') .then(res => { ..