seopport.log

prop-drilling 코드 Context API로 리팩토링 하기 작업중인 팬 레터 사이트 프로젝트의 컴포넌트와 전달받는 props들을 도식으로 정리해보았다. 프로젝트 구조를 살펴보면 Home과 Detail 페이지에서는 단순히 프롭스를 받아서 하위 컴포넌트로 전달하는 역할만을 수행하고 있다. 이를 해결하기 위해 context를 통해 state를 전역에서 관리하도록 수정하였다. 최상위 컴포넌트인 router.js 에서 편지를 저장하는 state를 정의하였고, 선택 캐릭터 정보는 Home컴포넌트에서만 쓰이기 때문에 Home 컴포넌트에서 정의하여 context로 관리하였다. 트러블 슈팅 - 초기 렌더링 시 undefined 오류 및 useEffect로 발생하는 렌더링 문제 문제 상황 페이지가 불러와지면 한 ..

팬레터 사이트 트러블슈팅 1. styledComponent, props 오류 styled components에서 props를 통해 스타일을 제어하는 부분에서 오류가 나고있었다. 1.' React에서 "알 수 없는 속성이 DOM 요소로 전달되고 있습니다' 코드를 살펴보니 이러한 오류가 나는 props들은 스타일드 컴포넌트에서만 사용되는 props였다. 다른 컴포넌트로 해당 props를 전달하지 않고, 해당 스타일 규칙이 현재 컴포넌트의 스타일 범위 내에 있다면 해당 props는 스타일드 컴포넌트에서만 사용되는 것으로 간주된다. 그러나 DOM은 이를 알지 못하고 속성(attribute)으로 인식하게 되어 경고가 발생하는 것이다. 해결 방법은 transient props(일시적인 props)를 사용하는 것이다..

router, param으로 동적 페이지 이동하기 /: 뒤에 값을 지정하면 슬래쉬 어떤 값이 들어오든 details 라는 하위페이지로 이동하게 된다. id라고 적어주는 값은 슬래쉬 뒤에 들어온 값을 id로 지칭하겠다는 의미이다. navigate(`/details/${item.id}`)}>상세보기 그런 다음 details 페이지로 넘어가는 버튼(링크) 역할을 하는 요소에 navigate를 줄때 param 부분에 요소의 id값을 가지고 넘어가도록 작성하면 하위페이지에서는 이런식으로 주소가 설정된다. const param = useParams(); 따라서 하위페이지에서는 id라고 지칭한 부분을 usePrams를 통해 받아옴으로써 클릭한 요소의 id값을 알 수 있다. //클릭한 요소만 출력되게 {savedLet..

useState와 useRef 비교하기 useState와 useRef의 차이점을 알아보기 위해 간단한 코드를 작성해보았다. function App() { console.log("렌더링 되었음") const [text, setText] = useState(''); const handleStateChange = (e) => { const newText = e.target.value; setText(newText) console.log(newText) } const inputRef = useRef(); const handleRefChange = () => { console.log(inputRef.current.value); } return ( State Ref ) } 두 input에 각각 state와 ref를..

절대경로 설정하기 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 기존 업데이트 방..