짧은코딩

React developer tools 리엑트 개발시에 생산성을 굉장히 늘려준다. 이것은 크롬의 확장 도구이다. https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision ca7a38ae4 on 5/12/2022. chrome.google.com 이 사이트에서 다운 설정 -> 도구 더보기 -> 확장 프로그램 -> 세부 정보 그리고 설정을 켜준다. 그 후 npm start를 하면 오른쪽 상..

-API 호출을 위한 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2021, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com 여기에는 어떤 API 서비스로 자원을 가져다가 쓸 수 있는지 리스팅을 해놨다. 이중에서 comments를 사용했다. comments의 내용에서 이런 것을 활용해 데이터를 가공했다. -App.js i..

Lifecycle 탄생: 화면에 나타나는 것(Mount), ex) 초기화 작업 변화: 업데이트, 리렌더(Update), ex) 예외 처리 작업 죽음: 화면에서 사라짐(UnMount), ex) 메모리 정리 작업 리엑트는 각 주기마다 사용할 수 있는 메소드를 가지고있다. Mount: ComponentDidMount, 컴포넌트가 생기는 순간에 사용 Update: ComponentDidUpdate, 컴포넌트가 변화하는 순간에 사용 Unmount: ComponentWillUnmount, 컴포넌트가 화면에서 사라지기 이전에 사용 -React Hooks 원래 State, Effect, Ref 등은 class형 컴포넌트에서만 사용가능 하고 함수형 컴포넌트에서 못 사용하는데 use를 붙여서 낚아채서 사용한다. 하지만 c..

import { useRef, useState } from "react"; const DiaryItem = ({ onEdit, onRemove, author, content, created_date, emotion, id, }) => { // isEdit가 false면 평소, true면 수정하는 상태 const [isEdit, setIsEdit] = useState(false); const toggleIsEdit = () => setIsEdit(!isEdit); // 기본값 content로 해야 원래 값에서 수정 가능 const [localContent, setLocalContent] = useState(content); const localContentInput = useRef(); const hand..

-App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, setData] = useState([]); const dataId = useRef(0); const onCreate = (author, content, emotion) => { const created_date = new Date().getTime(); const newItem = { author, content, emotion, created_date, id: dataId.curre..

App DiaryEditor DiaryList 리엑트는 이런 트리 구조로 이루어져 있다. 0번 레벨: App 1번 레벨: DiaryEditor, DiaryList 이렇게 있고 같은 레벨끼리는 데이터를 주고 받을 수 없다. React는 단방향으로 데이터가 흐른다, 즉 위에서 아래로만 흐른다. 이벤트가 발생하면 위로 올라가는 흐름이 나오고 데이터를 추가하면 아래로 내려가는 흐름이 나온다. -App.js import { useRef, useState } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const App = () => { const [data, ..

-App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "이정환", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 2, author: "홍길동", content: "하이 1", emotion: 5, created_date: new Date().getTime(), }, { id: 3, author: "아무개", content: "하이 1", emotion: 5, created_date: new Date().getTime(),..

import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.focus(); retu..

State state: 계속해서 변화하는 특정 상태에 따라 각각 다른 동작을 함 ex) 어두운 테마로 바꾸는 모드처럼 상태가 계속 동적으로 바뀔 수 있는 것을 의미한다. -버튼 누르면 증가 감소하는 코드 //상태를 사용하겠다라는 메소드를 import import React, { useState } from "react"; const Counter = () => { // h2태그의 0은 1씩 증가 감소하는 // count 상태라고 생각할 수 있다. const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(count - 1); }; retur..

환경 설정 npx를 사용해서 파일들을 만들었다. npx를 사용한 이유는 한번만 사용해서이다. 그리고 npm start를 하고 localhost:3000에 접속하면 내 서버와 연결된다. localhost 그리고 src에 있는 App.js의 파일을 수정하면 localhost:3000 페이지가 바뀐다. 그치만 html이 아니고 js에서 어떻게 화면을 띄우는지 궁금하다. => App 함수에서 리턴하는 값이 html body의 자식으로 들어가서 그렇다. 자세히 살펴보면 index.js에서 App.js를 import로 받아온다. 그리고 index.js 안에 있는 reader 함수는 화면에 그려주라는 함수이다. readner로 root에 넣어주라는 것이다. index.html에 있는 id가 root인 div에 App..