[React] Hooks - useReducer

useReducer란 무엇인가?React의 useReducer Hook은 상태(state) 관리를 위한 Hooks으로 복잡한 상태 로직을 처리하거나 여러 상태 값을 다뤄야 할 때 유용하다. useState와 비슷한 역할을 하지만 상태 업데이트 로직이 복잡해질수록 useReducer는 훨씬 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 해준다. useReducer는 리듀서 패턴에 따라 상태와 상태를 변경하는 함수(reducer)를 함께 관리하여 useState보다 더 복잡한 상태 변화를 효율적으로 처리할 수 있도록 설계되었다. useState vs useReduceruseReducer와 useState는 모두 상태를 관리하는 데 사용되지만 사용 사례가 다를 수 있다.useState: 간단한 상태 관리에..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[React] Hooks - useRef

useRef란 무엇인가?React의 useRef Hook은 참조(ref)를 통해 DOM 요소나 컴포넌트 상태 값을 유지하는 데 중요한 역할을 한다. useRef는 주로 DOM 요소에 직접 접근, 불필요한 재렌더링 방지, 상태 값 유지 등의 상황에서 유용하게 사용된다.useRef는 변경 가능한 객체를 반환한다. 이 객체의 .current 프로퍼티에 값을 저장할 수 있으며 이는 컴포넌트가 다시 렌더링되더라도 값이 유지된다. 일반적으로 DOM 요소에 접근하거나 렌더링 사이에서 값을 기억하는 데 사용된다.ref 객체: useRef는 { current: null } 형태의 객체를 반환하며 이 객체는 렌더링 사이에서 값이 유지된다.DOM 접근: ref는 DOM 요소에 직접 접근할 때 주로 사용된다. ref를 통해 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[React] Hooks - useEffect

useEffect란 무엇인가?React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.useEffect 사용방법useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[react] Hooks - useState

React는 UI를 선언적으로 관리할 수 있는 컴포넌트 기반 라이브러리이다. 그 중에서도 상태(State)는 동적인 데이터를 관리하는 데 중요한 역할을 한다. 이때 상태를 쉽게 관리할 수 있도록 도와주는 것이 useState 훅이다. useState란 무엇인가?useState는 함수형 컴포넌트에서 상태를 관리하기 위한 React hook이다. React 16.8 버전에서 등장한 이 훅은 기존의 클래스형 컴포넌트에서 상태를 관리하던 방식에서 벗어나 함수형 컴포넌트에서도 쉽게 상태를 선언하고 변경할 수 있게 한다.const [state, setState] = useState(initialState);/* state: 현재 상태의 값을 저장하는 변수setState: 상태를 변경하는 함수initialState:..

• format_list_bulleted Frontend/React
• · 2024. 9. 21.
• textsms

[React] 리액트의 렌더링 구조

리액트 렌더링?React는 UI를 업데이트하고 유지하는 효율적인 방식을 제공하는 라이브러리이다. 렌더링은 React에서 컴포넌트의 상태(state) 또는 props가 변경될 때 UI를 업데이트하는 과정이다. React의 렌더링은 클래스형 컴포넌트와 함수형 컴포넌트에서 다르게 동작하여 각각 동작 원리를 알아보아야 한다. 최근에는 함수형 컴포넌트를 지향하고 있으며 공식 문서에서도 함수형 컴포넌트 방식을 권장한다. 렌더링 프로세스렌더링 촉발(Triggering a Render)컴포넌트 렌더링(Rendering the Component)DOM에 커밋(Committing to the DOM)리액트 공식 문서에서는 아래와 같은 비유로 설명하고 있다.렌더링 촉발: 손님의 주문을 주방으로 전달하는 단계입니다.컴포넌트 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 13.
• textsms

React 컴포넌트 (함수형 VS 클래스형)

React 컴포넌트리액트(React)에서 컴포넌트(Component)는 UI를 구성하는 재사용 가능한 독립적인 모듈이다.화면에 나타나는 각각의 독립적인 요소를 말한다.  예를 들어 버튼, 헤더, 푸터, 입력 폼 등 모든 것들이 컴포넌트로 만들어질 수 있다.컴포넌트 표현 방법리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나누어진다.함수형 컴포넌트가 더 간단하고 가독성이 좋아 선호하는 추세이다. 클래스형 컴포넌트 방식class MyClassComponent extends Component { render() { return {this.props.message}; }} 함수형 컴포넌트 방식const MyFunctionalComponent = (props) => { return {props...

• format_list_bulleted Frontend/React
• · 2024. 3. 30.
• textsms