Hook2 [TIL 2023.06.20] React Hooks useContext / useCallback / useMemo 💻오늘 배운 내용 useContext 전역 데이터를 관리하는 api createContext : context 생성 Consumer : context 변화 감지 Provider : context 전달(to 하위 컴포넌트) 1. context 폴더 > FamilyContext.js 생성 import { createContext } from "react"; // 여기서 null은 초기값 export const FamilyContext = createContext(null); 2. props를 가장 처음 전달하던 컴포넌트에서 FamilyContext를 import해주고 자식컴포넌트를 로 감싸준다. 이때 전달할 데이터를 객체 형태로 전달한다. import React from "react"; import Fath.. 2023. 6. 21. [TIL 2023.06.19] React Styled components / useEffect / useRef 💻오늘 배운 내용 Styled components CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 vscode-styled-components extension 설치 설치 후 터미널에서 명령어 실행 yarn add styled-components 컴포넌트에 import 해서 사용한다 import styled from "styled-components"; 사용예시) const StBox = styled.div` width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; const App = () => { return 박스; }; export default App; 이 또한 자바스크립트이기 때문에 스타일 코드를 JS코드 작성.. 2023. 6. 20. 이전 1 다음
