본문 바로가기

전체 글53

리액트의 useEffect로 컴포넌트 생명주기 관리하기 소개 리액트의 함수형 컴포넌트에서 useEffect 훅은 컴포넌트의 생명주기 관리에 핵심적인 역할을 합니다. 이 글에서는 useEffect를 활용하여 컴포넌트의 마운트, 업데이트, 언마운트 단계에서 어떻게 작업을 수행하는지에 대해 간단하게 알아보겠습니다. 1. 마운트(Mount) 컴포넌트가 처음으로 화면에 나타날 때(마운트 시점)의 작업을 useEffect 내에서 처리할 수 있습니다. 이를 통해 클래스형 컴포넌트의 componentDidMount와 유사한 동작을 수행할 수 있습니다. import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // 컴포넌트가 처음 마운트될 때 실행되는 콜백함수 console... 2024. 1. 1.
useRef : React에서 DOM 조작하기 소개 리액트에서 useRef는 DOM을 조작하고 컴포넌트의 상태를 유지하는 데 사용되는 강력한 훅 중 하나입니다. 이 글에서는 useRef의 기본 개념을 다뤄보겠습니다. useRef란? useRef는 리액트 함수 컴포넌트에서 DOM 요소에 직접적으로 접근하거나, 컴포넌트의 상태를 유지하는 데 사용됩니다. 이는 클래스 컴포넌트에서의 this와 유사한 역할을 합니다. 기본 사용법 useRef를 사용하려면, 먼저 리액트에서 해당 훅을 가져와야 합니다. 그리고 함수 컴포넌트 내에서 useRef를 선언합니다.(요즘은 자동 import가 되더라구요) 아래와 같이 선언을 하게 되면 myRef을 사용해 DOM 요소에 접근할 수 있습니다. import React, { useRef } from 'react'; const .. 2023. 12. 14.
리액트의 Props 소개 리액트(React)에서 Prop는 컴포넌트 간에 데이터를 전달하는데 중요한 역할을 합니다. 이 글에서는 리액트의 Props에 대한 기초적인 이해를 다루어 보겠습니다. Props란? Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.(단방향) Props를 통해 컴포넌트 간에 정보를 공유하고 동적인 데이터 전송이 가능해집니다. Props의 전달 Props는 부모 컴포넌트에서 자식 컴포넌트로 전달됩니다. 예를 들어, // 부모 컴포넌트 const ParentComponent = () => { return ; } // 자식 컴포넌트 const ChildComponent = (props) => { return ( Name: {props.name} Age: {props.age} ); .. 2023. 12. 13.
리액트의 상태(State) 관리 소개 이 글에서는 리액트의 상태(state)에 대한 기본적인 이해를 다룰 것이다. 상태(State)란? 리액트의 상태는 간단히 말해 컴포넌트 내에서 관리되는 데이터이다. 이 데이터는 컴포넌트의 생명주기 동안 변할 수 있으며, 변화에 따라 UI가 업데이트된다. 상태의 생성과 초기화 리액트에서 상태를 사용하기 위해선 useState 훅을 이용한다. 예를 들어, import React, { useState } from 'react'; const MyComponent = () => { const [count, setCount] = useState(0); // 나머지 코드 } 위의 코드에서 count는 상태 변수이고, setCount는 상태를 변경하는 함수이다. useState(0)은 초기 상태를 0으로 설정한다.. 2023. 12. 13.
반응형

티스토리툴바