🩵 React/학습 노트16 [React🩵] Context ⬇️ 이전에 공부했던 props와 props drilling [React🩵] Props01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mothersolby.tistory.com 01. props drilling의 문제점props란 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해주는 것을 말한다(단방향 데이터 흐름)props drilling이란 부모 컴포넌트에서 몇단계를 건너뛴 자식 컴포넌트로 데이터를 전달할 때 중간 단계의 컴포넌트가 불필요하게 props를 전달해야하는 문제를 의미한다ex. 부모 → 자식 → 손자 컴포넌트가 존재할 때 부.. 2025. 3. 14. [React🩵] useRef 01. useRefuseState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 React hook리랜더링과 상관없이 값을 기억하기 위해 사용되며(렌더링과 상관없이 변수를 유지), 자바스크립트 DOM API를 직접 사용하지 않고 DOM 요소에 직접 접근할 때 사용된다 02. 사용 방법import "./App.css";import { useRef } from "react";function App() { const ref = useRef("초기값"); //👈🏻초기 값 console.log("ref 1", ref); ref.current = "바꾼 값"; //👈🏻변경 값 console.log("ref 1", ref); return ( useRef에 대한 이야기.. 2025. 3. 14. [React🩵] useEffect와 components lifecycle (컴포넌트의 생명주기) 01. 컴포넌트의 생명주기탄생 → 변화 → 소멸 의 과정을 거친다useEffect를 사용하면 생명주기 단계마다 특정 작업을 실행할 수 있다 마운트(Mount): 컴포넌트가 화면에 처음 나타날 때(탄생)업데이트(Update): 상태(state)나 props가 변경되어 다시 그려질 때(리랜더링 포함)언마운트(Unmount): 컴포넌트가 화면에서 사라질 때(제거) 02. 마운트(Mount)컴포넌트가 처음 화면에 랜더링 될 때 발생하는 과정HTML요소가 DOM에 추가된다 ☑️ 마운트 시 실행되는 것들useEffect의 첫번째 실행console.log()가 있으면 처음 한 번 출력됨API요청(데이터 불러오기) 같은 초기 작업 수행import { useEffect } from "react";function .. 2025. 3. 14. [React🩵] Styled-components Styled-components란?리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지컴포넌트에 공통으로 적용할 스타일을 만든다백틱(`)으로 감싸서 작성한다const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;`;const boxList = ["red", "green", "blue"];const getBoxName = (color) => { switch (color) { case "red": return "빨간박스"; case "green": return "초록박스"; case "b.. 2025. 3. 13. [React🩵] useState 01. useState란?React 컴포넌트에서 상태 관리하는 Hook함수형 컴포넌트에서 상태를 사용할 수 있게 도와준다 02. 기본 문법const [state, setState] = useState(initialValue);state → 현재 상태 값setState → 상태를 업데이트하는 함수initialValue → 상태 초기 값 03. 사용법3-1. 기본 사용법import { useState } from "react";function Counter() { const [count, setCount] = useState(0); const handleButton = () => setCount(count + 1) return ( 현재 카운트: {count} +1.. 2025. 2. 28. [React🩵] Props 01. Props란?컴포넌트 끼리의 정보교환 방식부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어) 02. Props의 활용 방법function Mother() { const lastName = "최"; const firstName = "르탄"; // ✅ 새로운 props 추가!// 자식 컴퍼넌트 child에 props를 전달 return ;}// 자식 컴퍼넌트인 child는 props를 전달받아 사용// props는 단순 파라미터명으로 변경 가능function Child(props) { return ( {`내 이름은 ${props.lastName}${props.firstName}입니다.`} );}쉽쥬? 👍🏻.. 2025. 2. 27. 이전 1 2 3 다음
