useRefReact에서 DOM 요소나 값을 저장하고 변경하더라도 컴포넌트가 재렌더링되지 않도록 하는 훅const ref = useRef(value)console.log(ref) // {current:value]useRef를 부르면 ref 오브젝트를 반환const ref = useRef("hi")console.log(ref) // {current:"hi"] 용도1. 저장공간State와 비슷하게 어떠한 값을 저장해주는 저장공간으로 사용변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 유용( 불필요한 렌더링 방지 성능 최적화) *State와 다른점State 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화Ref 변화 -> 랜더링X -> 변수들 값 유지∴ State 변화로 렌더링해도 Ref값 유지됨사용..

간단한 애니메이션 : CSS, Styled-Components의 keyframes 사용-> 참고  : https://bbbpp.tistory.com/161  (keyframes 잘 모른다면)복잡한 애니메이션: React Transition Group, Framer Motion 같은 라이브러리 사용.-> 참고 : 주소 수정!!! 사용기존 방식//app.css@keyframes rotate { 0% { transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}.rotateDiv { animation: rotate 1s infinite;}//App.jsimport './app.css'function App..

Styled Components: JS파일 내 CSS를 사용할 수 있게 해주는 CSS-in-JS 라이브러리 설치npm i styled-components @types/styled-components 기본 사용const 컴포넌트명 = styled.태그명`~css~`;import styled from "styled-components";const Button = styled.button` background-color: thistle; border: none; color: white;`;- Class Name 자동랜덤으로 주어짐 프로퍼티 사용 동적스타일링const Container = styled.div` display: flex;`;const Content = styled.div` backgrou..

Navigation경로이동1. useNavigate이벤트 핸들러(버튼 클릭 등)나 특정 조건에 따라 프로그래밍적으로 경로 이동을 할 때 사용하는 훅(함수)const navigate = useNavigate();navigate("경로");import {useNavigate} from "react-router-dom";function Login() { const navigate = useNavigate(); const loginHeandle = () =>{ //로그인 성공 후 이동 navigate("/mypage") } return Login} navigate( -1 ) 뒤로 가기  navigate( 1 )앞으로 가기 navigate( '/path', { replace: true } ) 히..

React Router: React 애플리케이션에서 라우팅 기능을 제공하는 라이브러리로 URL과 React 컴포넌트를 매핑해 페이지 간 전환 처리-특징 : 동적 라우팅, 중첩 라우팅, URL변경 새로고침없이 콘텐츠 업데이트 *라우팅?요청 URL에 맞는 페이지를 보여주는 것설치 (createBrowserRouter도 쓸거라 최신버전으로 받음)npm install react-router-dom@latest BrowserRouter: 기본 라우팅 설정을 위한 컴포넌트-Router.tsximport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';import Home from './Home';function Router() { retu..

useContext: 전역 상태 관리(테마,언어설정,사용자정보) 훅으로, 컴포넌트 간 데이터 쉽게 전달하도록 도와줌  props drilling 문제 줄이는데 유용  *props drilling?데이터를 자식-손자-증손자에 걸쳐 계속 내려야 할 때-> 단점 : 만약 앱 내부 많은 컴포넌트들이 공통적으로 필요한 전역데이터(사용지,테마,언어설정)를 props로 일일이 단계별로 전달하면 복잡해지고 힘듦. 그리고 원하는 자식 컴포넌트에게 프로퍼티를 전달하기 위해 해당 값을 사용하지않는 경우에도 props 을 받고 전달해야함  => Context Context앱 내부에서 전역적으로 필요한 데이터들을 컴포넌트들끼리 쉽게 공유할 수 있는 방법제공데이터를 가지고 있는 상위 컴포넌트가 Context를 통해 데이터를 알림..

Lifecylcle마운트 : 첫 렌더링할 때업데이트 : 리렌더링될 때언마운트 : 더이상 렌더링하지 않을 때 useEffect: 어떤 값이 변경될 때마다 특정 코드를 실행하는 훅, 특정 값 검사useEffect(callback, [deps?]) //콜백함수, 의존성 배열첫번째 인자 : 수행하고자 하는 작업두번째 인자 : 검사하고자하는 특정 값 or 빈 배열 마운트 제어 (컴포넌트가 처음 렌더링될 때): 두번째 인자 빈 배열[]일 때 마운트 (처음 렌더링) 시에만 콜백함수 실행 useEffect(() => { console.log("컴포넌트가 처음 렌더링될 때 실행");}, []); props가 변경되어도 다시 실행X-주요 사용1회 실행 로직(초기화 코드, 로그 출력, 타이머 설정)초기 데이터 로드useE..

State1. state: 컴포넌트 내에서 데이터가 저장되는 곳2.setState: state를 변경시켜주는 함수 *state가 변경될시 해당 컴포넌트 재렌더링됨 ( useState ,useEffect 유지)3. useState: state, setState를 return 하면서 초기값을 설정해주는 hook const [state, setState] = useStete(초기값);//state만 쓰고싶다면const state = useStete(초기값)[0]; setState함수를 통해 state 변경가능. 변경후 리렌더링사용1. setState함수로 state 값 변경import { useState } from 'react';function App() { const [counter,setCounter..

Props : 컴포넌트(자식)에 데이터를 전달하는 방식 -부모 컴포넌트function App() { return ( //Props { content:"Save Changes", food:"banana" } 전달 ) } -자식 컴포넌트function Btn(props) {//전달받은 properties console.log(props); //Object {content: 'Save Changes', food: 'banana'} console.log(props.content); //Save Changes console.log(props.food); //banana}값사용 때 마다 점표기법 쓰기 여간 불편 1. 구조 ..

Component: React에서 UI를 구성하는 기본 단위 (재사용가능)🎈컴포넌트의 이름은 항상 대문자로 시작하기1. 함수형 컴포넌트function MyComponent() { return Hello!;}* 화살표 함수 컴포넌트const MyComponent = () => Hello!;- 한줄로 작성시 {return} 생략가능- {}중갈호 같이 적는다면 return 필수const MyComponent = () =>{ return ( Hello! );}; 2. 클래스형 컴포넌트: React의 이전 버전 방식기존 프로젝트나 레거시 코드에서는 여전히 클래스형 컴포넌트를 사용하고 있을 수 있기때문에 알아두면 좋음.class MyComponent exte..