gggimmin 개발 블로그 gggimmin 개발 블로그

예제와 함께 학습을 진행하다보면 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해줄때 데이터가 필요없는 중간 컴포넌트를 거치고 거쳐 데이터를 전달해주는 경우도 많았다. 이 부분에 대해 불편함을 느끼던 중, 이런 문제를 해결할 유용한 React hook 이 있다는 것을 알았다. " useContext " 'useContext' 는 React 에서 제공하는 훅 중 하나로, React 컨텍스트(Context)를 사용하여 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용된다. 컨텍스트는 React 애플리케이션 내에서 전역적으로 데이터를 공유하고, 컴포넌트 간에 데이터를 전달하기 위한 방법을 제공한다. 'useContext' 를 사용하면 컨텍스트에 저장된 값을 읽어와서 사용할 수 있다. context ..

useRef 는 DOM 요소에 접근할 수 있도록 하는 React Hook 이다. 리액트에서도 DOM을 선택해야 할 상황이 생기는데 예를들자면, 특정 input 태그를 focusing 해야 하는 경우다. import "./App.css"; import { useRef } from "react"; function App() { const ref = useRef("초기값"); console.log("ref", ref); return ( useRef에 대한 이야기에요. ); } export default App; 위 코드는 useRef hook의 사용법이다. 콘솔을 확인해본다면 ref 에는 값이 저렇게 담겨있는걸 볼 수 있다. 그리고 ref 에 담겨있는 값을 변경도 가능하다. import "./App.css";..

useEffect ? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. - 어떤 컴포넌트가 화면에 보여질때 내가 무언가를 실행하고 싶다면 - 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 위와 같은 상황이 있을 때 useEffect 를 사용한다. ( useState 와 마찬가지로 import 해서 사용해야한다. ) // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; ..