1. Custom Hook 과 일반 함수의 차이 커스텀 hook 과 일반 함수 모두 function 선언으로 시작한다.하지만 일반 함수는 react 의 상태(state) 나 효과(effect) 를 그냥 함수안에 넣을 수는 없다.그리고 use 라고 시작해야  custom hook 을 만들어서 사용이 가능 하다.   2. Coustom Hook 예제  useCounter 라는 커스텀 훅을 만들면 아래와 같이 값만 받아와서 증가 감소 버튼을 만들 수 있다.const [count, increment, decrement] = useCounter(); counter : {count} 증가 // 클릭 시 increment 함수 실행감소 // 클릭 시 decrement 함수 실행     기본..

1. Componet 의 생명 주기 1) Mount : 화면이 처음 렌더링 될 때 2) Update : 화면이 리렌더링 될 때 3) unMount : 화면이 제거 될 때 3가지의 상황을 useEffect 를 활용하면 처리가 가능 하다. 2. useEffect 1) 함수 기본 구조 (1) 은 화면에서 사라질때 실항할 코드를 작성한다. (2)의 의존성 배열은 재 랜더링 시에 값이 달라지면 useEffect 내부의 코드를 실행한다.useEffect(() => { // 실행할 코드 return () => { // 언마운트 시 실행할 정리(clean-up) 함수 (1) };}, [의존성배열]); // (2) return 부와 의존성 배열은 선택 사항으..

React 라우터 함수및 사용법 참조https://yongar2002.tistory.com/67 React Router1. React Router 란 1) React 에서 SPA(Single Page Application) 방식으로 Routing 할 수 있게 해주는 라이브러리 2) MPA (Milti Page Apllicating) 방식은 여러페이지로 구성이 되어 있어서, 다른페이지로 넘어갈때마다yongar2002.tistory.com 1. 받아올 데이터 확인 객체 내에 id, name, img, descroptiogn 속성이 있다.[ { id:0, name:'고양이', img: images.cat, description: '나만 고양이 없어...

1. React Router 란 1) React 에서 SPA(Single Page Application) 방식으로 Routing 할 수 있게 해주는 라이브러리 2) MPA (Milti Page Apllicating) 방식은 여러페이지로 구성이 되어 있어서, 다른페이지로 넘어갈때마다     완성된 HTML 파일을 받아오는 방식.     이로 인해 페이지 전환이 있을때 마다 flicker 현상(화면깜빡임) 이 일어나서 사용자 경험을 좋지 않게 한다. 3) SPA 방식의 라우팅은 서버로 부터 비어있는 HTML 을 받아오고 Javascript 파일을 받아와서 클라이언트     에서 조합해서 화면을 렌터링 한다. 그리고 다른페이지로 넘어갈때 데이터를 받아와서 필요한 부분만 리렌터링     하는 방식 2. Reac..

버튼을 클릭시 NumberDispatch 함수로 useReducer 의 numberReducer 함수가 실행이되고, 그결과가 number 에 반영이 되는 구조이다.useState 와 비슷 하지만 직접 값을 바꾸는게 아니라 action 을 전달하면 함수에의해 값이 바뀌는 구조import { useReducer } from "react";function App() { function numberReducer(oldNumber, action) { if (action === "plus") { return oldNumber + 1; } else if (action === "minus") { return oldNumber - 1; } else if (action === "rese..

prop drilling최상위 Component 에서 상태를 관리해야 하고 값을 전달해주려고 할때 아래 그림과 같이 최하위 컴포넌트에 전달하기 위해서는4단계나 건너서 전달해 주어야 한다. 하지만 이거보다 더 많은 컴포넌트가 중간에 있다면 ......Project 전체적으로 사용하는 데이터를 전역 데이터라고하는데 이것을 props와 state 로만 관리하게 되면 여러곳으로 내려줘야 한다는 문제점이 있다.이때 prop을 내려주는게 드릴로 땅을 파는 것 같다고 해서 이런 문제점을 prop drilling 이라고 부른다.이런문제점을 해결하기 위해서 React 에서 React Context 를 만들었다. React Context 적용방법Context API는 다음 3단계를 통해 사용할 수 있다.**create..