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..

redux는 상태 관리 라이브러리라고 하는데 redux는 왜 필요한가. 장점이 3가지가 있는데 1. 리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 된다 2. 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 3. 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. 4. 중앙 state관리소를 가지고 있다.(접근 및 제어를 할 수있다.) redux 사용 방법 새 프로그램 src폴더 안에 redux란 파일을 만든 뒤 , 그 안에 modules와 config폴더를 만들어준다. config파일 안에 configStore이란 js파일까지 만들어준다. redux : 리덕스 관련 코드를 모두 넣을 것 config: 리덕스 설정 관련 파일 전부 configStore : 중..

Mount constructor a. 컴포넌트가 맨 처음 만들어 질 때 호출 b. 생성자 getDerivedStateFromProps a. 부모 컴포넌트로부터 props를 전달 받을 때, state에 값을 일치시키는 역할 을 하는 메서드 b. 마운트 될 때, 리렌더링 될 때도 호출 render 화면에 그리는 메소드 a. 최초 mount가 준비완료되면 렌더링하는 메서드 b. 컴포넌트를 DOM에 마운트 하기위해 사용 componentDidMount a. 컴포넌트가 브라우저에 표시가 된 다음에 호출되는 메서드 Update(렌더링 후 state값이변경, props가변경, 부모컴포넌트가 변경되었을 때) getDerivedStateFromProps(mount랑 동일) Mount 과정에서도 동일하게 호출되었던 메서드..

useContext (useContext API) context 는 전역적으로 사용되는 어떤것을 말할 때 많이 쓰이는 용어다. 일반적을 데이터를 넘겨줄 때 부모에서 자식컴포넘트로 props를 통해서 데이터를 내려주곤 했는데 이게 너무 많이 되면 props drilling이 일어난다고 했었다. 그래서 데이터를 효율적으로 전달할 수 있도록 useContext를 사용하는 것이다. useContext의 필수 개념 3개를 꼭 기억해야한다. createContext = 객체, context 생성 consumer = context 변화 감지 Provider = context를 하위컴포넌트로 전달 useContext를 사용하기 위해서는 js파일을 하나 만들고 import { createContext } from "re..