공부기록용

🔴React.memo_component 🔴useCallback_함수 🔴useMemo_value 💫리-렌더링의 발생 조건 🔻컴포넌트에서 state가 바뀌었을 때 🔻컴포넌트가 내려받은 props가 변경되었을 때 🔻부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두 💫리액트에서 불필요한 렌더링이 발생하지 않도록 최적화하는 대표적인 방법 🔻memo(React.memo) : 컴포넌트를 캐싱 🔻useCallback : 함수를 캐싱 🔻useMemo : 값을 캐싱 // App.jsx import React, { useState } from 'react' import Box1 from './components/Box1'; import Box2 from './components/Box2'; import Box3 fr..

useContext 많은 props로 prop drilling이 너무 깊어지면 유지 보수 및 오류 파악이 힘들어 진다. 그래서 prop drilling이 되는 것 대신에 context API를 사용하게 되는데, useContext hook을 통해 쉽게 전역 데이터를 관리할 수 있게 된다. 💫context API 필수 개념 createContext : context 객체를 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) prop drilling // App.js import React from 'react' import GrandFather from './components/GrandFather' function App() { return } ..

🔴useRef 🔴useRef는 2가지 용도 🔴state와 ref의 차이점 💫저장공간으로서의 useRef, DOM요소 접근 방법으로서의 useRef useRef DOM 요소에 접근할 수 있도록 하는 React Hook, 리액트에서도 DOM을 선택해야 할 상황이 생기고 그때 사용한다. ref : reference_어떤 것의 참조 정도로 이해하기 const 변수 = useRef("초기값"); import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( ); } export default App; ref로 선언해 놓은 값에 접근해서 값을 바꿔..

🔴useEffect 🔴의존성 배열(dependency array) 🔴clean up useEffect 💫useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook import './App.css'; import { useEffect, useState } from 'react'; function App() { const [value, setValue] = useState(""); // 함수가 실행될때 렌더링 되는 useEffect // 그래서 input값이 입력될때마다 계속 console가 찍히는 것이다. useEffect(() => { console.log("useEffect") }); return ( { setValue(event.target.value); }..

🔴useState 🔴일반적인 방식과 함수형 업데이트의 비교 🔻무엇이 다른가 🔻왜 다른 방식을 취하는가 useState useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줍니다. const [state, setState] = useState(initialState_초기값); useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습이며, 우리는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있다. state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야 한다. 함수형 업데이트 setState를 사용하는 방식에는 우리가 알고 있는 방식이 아닌 또 다른 방식이 있습니다. 함수형 ..

🔴GlobalStyles(전역 스타일링) 🔴Sass 소개, Nesting 🔴css reset 📌styled components는 컴포넌트 내에서만 활용 GlobalStyles(전역 스타일링) 프로젝트를 아우르는, 공통적으로 들어가야 할 스타일을 적용하는 것으로 전역적으로(globally)’ 스타일을 지정한다고 표현한다. 그럴 때 적용하는 방법이 바로 전역 스타일링이다. import React from "react"; import styled from "styled-components"; function TestPage(props) { return ( {props.title} {props.contents} ); } const Title = styled.h1` /* 전역으로 뺌_GolobalStyle fon..