HYEWON JUNG의 개발일지

Router Dom 이란? react 상에서 여러페이지를 가진 웹을 만들 수 있게 해주는 패키지 Router Dom 사용법 각각 만들고자 하는 페이지 컴포넌트를 만들고 router.js 에 import해와서 안에 안에 형태로 사용한다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import About from "../pages/About"; import Works from "../pages/Works"; import Contact from "../pages/Contact"; const Router = () => { return ( ) } export default Rout..

페이지를 만들 때 헤더나 풋터영역은 대부분 변화 없이 사용하는 경우가 많은데 그런 영역까지 리렌더링이 될 필요는 없기에 그 부분에서 children을 사용하면 된다. 전에 children을 설명하면서 썼던 예제를 보면서 이해해보자 function Layout(props) { return ( {/* 전체를 묶는 최상위 태그가 하나 있어야해요*/} 이건 모든 페이지에서 보일거에요. {props.children} ) } 다른컴포넌트 여기에 들어간 값이 보일거에요 원래 이렇게 사용해서 헤더를 고정으로 했었는데 이제는 리렌더링이 되지 않도록 해보려한다. shared 폴더에 layout컴포넌트를 추가한 후 function Layout({ children }) { return ( //헤더컴포넌트가 있다고치자 {chi..

playload란? 전달되는 실체의 양이라고 볼 수 있다. 즉 action에서의 payload는 type을 payload만큼 처리하는 것이다. playload가 3이라면 type이 3번 처리되는 것이 된다. 카운터에서 임의로 주어주는 숫자만큼 더하고 빼는 기능을 넣기 위해서 payload를 이용할 수 있는데 그러기 위해서 기존의 UI에 input을 추가해줘야한다. UI 수정 const[number, setNumber]= useState(0) {setNumber(event.target.value)}}/> 리렌더링을 위해서 state를 만들어주고 인풋에 연결해준다. 그리고 해야할 일은 action의 타입을 추가하는 것이다. aciton type추가 const PLUS_N = "counter/PLUS_N" c..

https://github.com/hyewon0615/Algorithm.git GitHub - hyewon0615/Algorithm Contribute to hyewon0615/Algorithm development by creating an account on GitHub. github.com

목표 강의 듣기 개념정리 2023.11.07 - [React] - styled component 작성법 장점 자바스크립트 메소드 사용 styled component 작성법 장점 자바스크립트 메소드 사용 styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. styledcomponent는 리액트의 고유 기능은 아니고 hyewonjung-coding.tistory.com 2023.11.07 - [오류모음] - Expected an assignment or function call and instead saw an expression Expected an assignment or..

목표 개인과제 ui 구현하기 새로운 개인 과제 '팬레터' 요구사항 체크하기 app구조 header (title, 멤버버튼) 입력 form (input, selector, button) 멤버별 팬레터 CR 구현 팬레터 누르면 상세페이지 모달(모달은 선택사항임) 상세페이지에서 UD 구현 필수 요구사항 props drilling -> useContext -> redux 순으로 구현하기 styled-component 이용(스타일링 전부) 2023.11.07 - [React] - styled component 작성법 장점 자바스크립트 메소드 사용 styled component 작성법 장점 자바스크립트 메소드 사용 styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만..