seopport.log

절대경로 설정하기 1. root 경로에 jsconfig.json 파일 생성 // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 2. vscode 재시작 3. baseUrl을 기준으로 작성하면 됨 ex 1) src/assets/melting_chiikawa 이미지 import 하기 import meltingChiikawa from "assets/melting_chiikawa.png" ex 2) src/components/Main/LetterSummaryView 컴포넌트 import 하기 import LetterSummaryView from "components/Main/LetterSummaryView"; chi..

함수형 setState const filterByAge = (minAge) => { //기존 // const filteredByAgeStudent = initialStudents.filter((item) => { // return item.age >= minAge // }) // setFilteredStudents(filteredByAgeStudent) //함수형 setFilteredStudents((prev) => { return prev.filter((item) => item.age >= minAge) }) }; 함수형 setState를 사용하면 초기값을 받아오지 않고도 set에 들어있는 prev 데이터를 이용해서 데이터를 가공할 수 있다. setState를 컴포넌트로 넘겨주기 function App..

개인과제 리팩토링 1. 함수이름 컨벤션에 맞게 수정 2. nano id 라이브러리로 아이디값 설정 Virtual Dom (가상돔) 리액트의 virtual dom을 사용하면 조작을 빠르게 처리할 수 있다. 리액트는 가상돔을 이용해서 실제돔을 변경하는 작업을 효율적으로 수행한다. 실제 돔의 구조를 그대로 따온 복사본 형태 실제 돔은 아니지만 객체 형태로 메모리에 저장되기 때문에 실제 돔 조작보다 빠르게 조작할 수 있다. (실제 돔 조작보다 메모리상에 올라와있는 js객체를 변경하는 작업이 훨씬 가볍다) 리액트의 DOM조작 과정 리액트는 두가지 버전의 DOM 정보를 가지고 있음. 화면이 갱신되기 전 구조가 담겨있는 가상 돔 객체(좋아요 누르기 전) 화면 갱신 후 보여줘야할 돔 객체(좋아요 누르기 후) - sta..

CSS-in-JS 자바스크립트로 CSS 코드를 통해서 작성하는 방식 styled component는 말그대로 스타일된 ‘컴포넌트’이기 때문에 대문자로 시작해야한다. 그렇지 않으면 적용이 안됨. 만든 후 html태그 처럼 사용한다. import React from "react"; import styled from "styled-components"; const StBox = styled.div` //styled.p styled.span 등등 width: 100px; height: 100px; border: 1px solid green; margin: 20px; `; function App() { return 박스; } export default App; React Hook useState 기존 업데이트 방..