상식닷컴
로그인
가입하기
2026년 상식닷컴 선정 식당 & 카페 리스트
2025년 2026년 신상 호텔 리스트
최근에 오픈한 호텔을 찾는다면 살펴보세요
일주일 식단표 어플
자동 일주일 식단표 어플
안드로이드
아이폰
주식 & 코인 차트의 신
1000만원으로 2000만원 만들기 프로젝트
궁금한 상식 보기
멀티영양제를 섭취할 때 특정 음식을 피해야 하나요?
은근슬쩍 손잡는 남자와의 관계가 어려운 이유는 무엇인가요?
연애결혼 중매결혼을 통해 이루어지는 성격 차이의 해소 방법은?
맞선 자리의 분위기를 어떻게 해치지 않을 수 있나요?
남자가 여자 좋아할때 하는 행동을 구체적으로 알려주세요.
남자가 여자 좋아할때 하는 행동이 여자의 행동과 연결될 수 있나요?
두번째 만남 손잡기를 위해 마음의 준비를 하는 데 도움이 될 만한 조언은?
안사귀는데 손잡기를 했던 경험을 공유해 줄 수 있을까?
중매결혼에서 이성에 대한 첫인상이 중요한가요?
중매결혼에서 서류 준비는 어떻게 하나요?
Numerical Stability에서 행렬의 역할은 무엇인가요?
행렬을 사용하여 선형 변환을 설명할 수 있나요?
Previous
Next
수정하기 - 리액트의 "컨텍스트(Context)" API는 무엇이며, 어떻게 사용하나요?
닉네임
비밀번호
제목
내용
[이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]
리액트의 "<a href='https://sangseek.com/sangseeks/컨텍스트/ko'>컨텍스트</a>(Context)" API는 컴포넌트 트리에서 데이터를 전역적으로 관리하고 전달할 수 있는 방법을 제공합니다. 일반적으로 리액트에서는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하지만, 여러 단계의 컴포넌트를 거쳐야 할 경우 props를 계속 전달하는 것이 번거로울 수 있습니다. 이럴 때 컨텍스트 API를 사용하면 더 간편하게 데이터를 공유할 수 있습니다. 컨텍스트 API의 주요 구성 요소1. Context 생성 : `<a href='https://sangseek.com/sangseeks/React/ko'>React</a>.createContext()`를 사용하여 새로운 컨텍스트를 생성합니다. 이 함수는 두 가지 속성을 가진 객체를 반환합니다: `Provider`와 `Consumer`.2. Provider : `Provider`는 컨텍스트의 값을 제공하는 컴포넌트입니다. 이 컴포넌트의 `value` prop을 통해 하위 컴포넌트에 전달할 데이터를 설정합니다.3. Consumer : `Consumer`는 컨텍스트의 값을 <a href='https://sangseek.com/sangseeks/구독/ko'>구독</a>하는 컴포넌트입니다. 이 컴포넌트는 컨텍스트의 현재 값을 가져와서 사용할 수 있습니다. 사용 방법1. 컨텍스트 생성 : ```javascript import React from 'react'; const MyContext = React.createContext(); ```2. Provider 사용 : ```javascript const App = () => { const value = { user: 'John Doe', age: 30 }; return ( <MyContext.Provider value={value}> <ChildComponent /> </MyContext.Provider> ); }; ```3. Consumer 사용 : ```javascript const ChildComponent = () => { return ( <MyContext.Consumer> {({ user, age }) => ( <div> <h1>User: {user}</h1> <p>Age: {age}</p> </div> )} </MyContext.Consumer> ); }; ``` 훅을 이용한 컨텍스트 사용리액트 16.8 이상에서는 `useContext` 훅을 사용하여 더 간편하게 컨텍스트를 사용할 수 있습니다.```javascriptimport React, { useContext } from 'react';const ChildComponent = () => { const { user, age } = useContext(MyContext); return ( <div> <h1>User: {user}</h1> <p>Age: {age}</p> </div> );};``` 요약리액트의 컨텍스트 API는 컴포넌트 간에 데이터를 쉽게 공유할 수 있도록 도와줍니다. `Provider`를 통해 데이터를 제공하고, `Consumer` 또는 `useContext` 훅을 통해 데이터를 소비할 수 있습니다. 이를 통해 복잡한 props 전달 문제를 해결하고, 더 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.
이용안내
커뮤니티 이용안내
×
- 게시한 게시글로 발생하는 문제는 게시자에게 책임이 있습니다.
- 게시글이 타인/타업체의 저작권을 침해할 경우 모든 책임은 게시자에게 있습니다. 게시자가 모든 손해를 부담해야 합니다.
- 상식닷컴 운영자는 게시자와 상의하지 않고 게시글을 수정 또는 삭제할 수 있습니다.
- 상식닷컴 운영자는 깨끗한 커뮤니티 공간을 만드는 것이 1순위입니다.
수정하기
취소하기