02_STUDY/React13 [ React ] 카운트 값을 감소하는 함수, 음수값이 나오지 않도록 만들기 온도나 좌표 같은 값이면 모를까, 음수 값은 예기치 않는 버그나 오류를 발생시킬 수 있고 계산을 복잡하게 해서 프로그래밍에서는 음수값을 피하는 경우가 많다. 카운트 값을 감소하는 함수에서 음수값이 나오지 않도록 하는 방법을 알아보자. 1. 조건문 조건문을 사용해 count가 0보다 클 때만 setCount를 호출하여 값을 감소시키기 const decreaseCount = () => { if(count > 0){ setCount(count - 1); } }; 2. 삼항 연산자 삼항 연산자를 사용하여 0보다 크면 감소시키고 아니면 0으로 만들기 const decreaseCount = () => setCount(count > 0 ? count - 1 : 0); 3. Math.max() setCount에 값을 .. 2023. 8. 27. [ React ] 리액트 함수형 컴포넌트의 훅 Hook에 대해서 ( useState, useEffect, useContext, useMemo, useCallback, useRef ) 훅Hook이라고? 훅Hook은 우리가 만화영화에서 보던 후크선장의 그 훅Hook이 맞다. 갈고리를 사용해 함수형 컴포넌트에서 상태와 생명주기 기능을 특정한 시점에서 코드를 연결하거나 걸어두는 것처럼 사용해서 쉽게 상태 관리와 라이프사이클 기능을 사용할 수 있도록 도와준다. (예를 들어, useState 같은 경우 컴포넌트의 상태를 관리를 위한 훅인데 상태를 hook하고 끌어올려 컴포넌트에 사용할 수 있게 해준다.) 훅Hook이 왜 필요할까? 클래스 컴포넌트와의 비교 - 클래스 컴포넌트는 생명주기 메서드가 분산되어 있고, 상태관리, 생명주기 관련 로직이 복잡하게 얽혀있을 수 있다. 훅은 상태와 관련된 로직을 더 작은 단위로 분리해 관리하고 컴포넌트 구조를 간결하게 해준다. - 클래스 컴포넌트에서는 상태 로.. 2023. 8. 10. [ React ] 리액트 컴포넌트의 생명주기 ( mount → update → unmount ) 리액트 컴포넌트의 생명주기란 컴포넌트가 생성되고 소멸될 때까지의 과정이다. (생성되고 -> 업데이트 -> 사라진다) 컴포넌트 생명주기의 3단계 - 마운트 Mount 나타나는 것, 컴포넌트가 생성되는 시점 constuctor() 컴포넌트가 생성될 때 처음으로 호출된다. 초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다. render() 컴포넌트의 UI를 렌더링 한다. cpmponentDidMount() 컴포넌트가 DOM에 들어가고 호출된다. - 업데이트 Update 컴포넌트의 상태나 속성props가 변경될 때 발생하는 단계 shouldComponentUpdate(prevProps,prevState)컴포넌트가 업데이트 된 후 호출된다. (또는 forceUpdate() 강제 업데이트 함수 호출로.. 2023. 8. 8. [ React ] 컴포넌트 상태 관리 :: State란, 왜 setState()로 state를 변경해야 할까? State란? state란 컴포넌트의 변경 가능한 데이터를 관리하는 데 사용되는 자바스크립트 객체. 컴포넌트의 상태를 저장하고 변경할 수 있다. 데이터에 변화가 생기면 리렌더링을 통해 화면에 업데이트 된다. 클래스 컴포넌트에서 state 사용하기 import React, { Component } from 'react'; // Counter라는 클래스 컴포넌트 class Counter extends Component { constructor(props) { //생성자, 클래스 생성될 때 실행되는 함수 super(props); this.state = { //현재 컴포넌트의 state 정의 count: 0 }; } //setState()를 호출해 새로운 상태 설정 addCount = () => { this.s.. 2023. 8. 8. [ React ] 리액트 컴포넌트와 props :: 데이터 전달 및 재사용 가능한 UI구성 리액트 컴포넌트란? 컴포넌트는 UI의 구성요소로 화면에 보여지는 작은 조각들을 나타낸다. 작은 조각 컴포넌트들이 모여 하나의 컴포넌트를 구성하고 그런 컴포넌트들은 페이지를 구성한다. 컴포넌트를 사용해 UI를 독립적이고 재사용 가능한 모듈로 나누어 개발할 수 있다. render / state / props 로 구성되어 있다. 모든 리액트 컴포넌트는 Pure 함수 같은 역할을 해야 한다. (동일한 props와 state에 대해 항상 동일한 결과를 반환해야 한다) 기능 단위로 구분하는 것이 좋고 재사용 가능 로직이나 코드들은 재사용 하는 것이 좋다. 재사용할 일이 없어도 작은 단위로 단일한 책임을 가질 수 있도록 분리해서 나누는 것이 좋다. 컴포넌트 생성하기 - 리액트에서 컴포넌트를 생성하는 방법에는 Reac.. 2023. 8. 5. [ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링 Recat의 렌더링 과정 1. 데이터 변경 감지 Data Change (State/Props) React는 상태(State)와 속성(Props)를 모니터링해 데이터의 변경을 감지한다. 상태가 변경되거나 부모 컴포넌트로부터 새로운 속성을 받았을 때, React는 컴포넌트를 리렌더링해야 할 필요가 있는지 확인한다. 2. 가상 DOM 생성 Createing Virtual DOM 데이터 변경이 감지되면, React는 가상 DOM을 생성한다. ***가상 DOM ( Virtual DOM ) 메모리 상에 존재하는 가벼운 복사본으로 실제 DOM과 유사한 계층 구조를 갖는다. 가상DOM은 실제 DOM과 동기화 되지 않고 독립적으로 존재한다. 3.가상 DOM 비교하기 Comparing Virtual DOM 이전에 생성된 .. 2023. 8. 5. 이전 1 2 3 다음
