React 컴포넌트 라이프사이클에 대해 알아보기 안녕하세요 devRookie 입니다. 요즘 React에 대해서 조금씩 공부하다보니 정리해보고싶은 부분이 생겼습니다. 오늘은 컴포넌트 라이프사이클에 대해서 포스팅 해보도록 하겠습니다. React 컴포넌트 라이프사이클은 크게 3가지 카테고리로 분류됩니다. 1. 마운트(Mounting) 2. 업데이트(Updating) 3. 언마운트(Unmounting) 1. 마운트(Mounting) - constructor: 컴포넌트 생성 시 호출되는 메소드입니다. 컴포넌트의 초기 상태값을 설정할 때 사용합니다. - render: 컴포넌트가 생성되고 렌더링될 때 호출되는 메소드입니다. 컴포넌트의 구조를 정의합니다. - componentDidMount: 컴포넌트가 생성된 후, DOM에 마운트된 직후에 호출되는 메소드입니다. 초.. ReactJS 리액트js의 장단점 안녕하세요. devRookie입니다. React js 를 공부하다보니, 장단점이 있을 것 같아서. 오늘은 리액트js의 장단점을 간단하게 포스팅 해보려고 합니다. ReactJS는 다른 프론트엔드 프레임워크와는 달리 뷰(View)에 초점을 맞춘 라이브러리입니다. 이 말은 즉, ReactJS를 사용하면 UI를 구성하는 것이 간편해진다는 것을 의미합니다. ReactJS를 이용하면, 화면의 뷰를 작성하는 것을 더 쉽고 직관적으로 할 수 있습니다. ReactJS는 컴포넌트 기반 구조를 사용합니다. 이는 큰 뷰를 작은 컴포넌트로 분리하여 구성함으로써, 코드의 재사용성과 유지보수성을 높입니다. ReactJS를 이용하면 각 컴포넌트들을 개별적으로 디자인하고, 필요할 때마다 간단하게 재사용할 수 있습니다. 이는 개발 생산.. Redux를 활용한 React 상태 관리 안녕하세요 devRookie 입니다. Redux를 활용한 React의 상태관리에 대해서 포스팅 해보겠습니다. React는 컴포넌트 기반의 라이브러리로써, 컴포넌트의 상태를 관리하기 위해 state라는 개념을 사용합니다. 하지만 리액트 애플리케이션이 커지고 복잡해지면서, 여러 개의 컴포넌트를 거치며 전달되는 데이터를 관리하는 것이 어려워졌습니다. 이러한 문제를 해결하기 위해 등장한 것이 Redux입니다. Redux는 단방향 데이터 흐름을 중심으로, 상태를 하나의 스토어에 집중적으로 관리하는 패턴입니다. 이를 통해 애플리케이션 전역에서 데이터의 일관성과 예측 가능성을 유지하며, 데이터의 흐름을 명확하게 파악할 수 있습니다. Redux의 핵심 개념은 스토어, 액션, 리듀서입니다. 스토어는 리덕스 상태를 저장하.. React Hooks 사용법 안녕하세요 devRookie입니다. React.js 에서 가장 많이 사용하게 되는게 바로 Hooks입니다. React Hooks는 React v16.8에서 추가된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있게 해주는 기능입니다. 이번 글에서는 React Hooks 사용법에 대해 상세히 알아보겠습니다. useState Hook import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( You clicked {count} times setCount(count + 1)}> Click me ); } 위 예제에서 useState.. 이전 1 2 3 4 다음
