React.js

[React.js] useContext

mm_스터디 2024. 6. 30. 09:20
728x90

https://mm-study-front.tistory.com/55

 

[React.js] Context

컴포넌트 간의 데이터를 전달하는 방법 기능은 https://mm-study-front.tistory.com/36 [React.js] Props부모컴포넌트가 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것 모듈화 할 때 버튼

mm-study-front.tistory.com

 

 

 

이전 글 Context는 props을 대신하여 데이터를 보낸 것

props를 안 쓰면 데이터를 받아 쓰는 방법은??

 

→ 리액트 훅의 종류인 useContext 사용

 

 

https://mm-study-front.tistory.com/43

 

[React.js] React Hooks

클래스 컴포넌트의 기능을 함수 컴포넌트에서 사용할 수 있도록 도와주는 메서드 과거에는 클래스 컴포넌트만 모든 기능을 이용할 수 있었고, 함수 컴포넌트는 UI 랜더링만 가능했었음→  근

mm-study-front.tistory.com


 
import { useContext } from "react";
import { TodoContext } from "../App";

const 데이터 받아쓸 컴포넌트명 = () => {
  const 받아쓸 데이터 변수명 = useContext(앞 글에서 만든 Context 변수명);

 

 

이렇게 해서 기존의 props로 주던 값을 다 간단하게 변경 완료

 

근데 이 방법을 사용하면 

https://mm-study-front.tistory.com/51

 

[React.js] 최적화

최적화 (optimization): 목적에 따라 가장 좋은 결과가 얻어지도록 성능을 개선하는 행위로  컴파일러에서 원시 프로그램이 목적 프로그램을 생성하는 과정에 있어서, 목적 프로그램의 실행 시간

mm-study-front.tistory.com

최적화 관련 문제가 생겨버림!

728x90