1. 프론트 엔드에서 사용하는 세 가지 언어HTMLCSSJavascript React 에서는 HTML 과 Javascript 를 JSX라는 문법으로 한파일에 작성이 가능하지만, CSS 는 여전히 별도의 파일에 작성. 하지만 React 에서 CSS 외에도 다양한 스타일링 방법이 존재 2. CSS 의 단점과 SCSS 이 등장 CSS 장점배우기 쉽고 간단하다.별도의 설정이나 설치 없이 브라우저가 바로 인식로딩속도가 빠르다 CSS 단점코드의 중복이 많다.재사용성이 낮다.구조화가 어려워 유지보수가 힘들다. 3. SASS 와 SCSS 의 차이점 1) SASS : Syntactically Awesome Style Sheets (문법적으로 짱멋진 ..

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