react8 [ React ] map() 사용 시 key는 반드시 넣어줘야 하는 권장사항. map()을 활용해서 리스트를 만들다 보면 이런 에러가 나타난다. 리스트의 각 아이템에는 고유한 key prop이 필요하다는 에러. Key는 왜 필요한걸까? Key가 필수도 아니고 안 써도 작동하지만 필수처럼 쓰이는 권장사항이다. Key는 React가 동적 리스트나 반복 요소를 렌더링 할 때 어떤 항목을 변경하거나 추가, 삭제하는 것에 대한 식별을 돕는다. 식별자를 제공하면 리액트가 요소 간의 변경을 더 효율적으로 추적할 수 있고 업데이트도 더 빠르게 처리할 수 있다. 아이템의 재사용 관리도 더 쉬워지며 예상치 못한 버그나 렌더링 이슈도 방지할 수 있다. 엘리먼트의 안정적인 고유성을 부여하기 위해서는 배열 내부의 엘리먼트에 Key를 지정해야 한다. 데이터의 ID를 key로 지정하는 것이 고유하게 식별할 .. 2023. 9. 16. [ React ] 클래스 컴포넌트와 함수형 컴포넌트의 이벤트 핸들러 비교 이번에는 바인딩이 필요한 클래스 컴포넌트의 이벤트 핸들러를 다루는 방식, 바인딩 없이 클래스 필드 문법을 사용해 클래스 컴포넌트를 사용하는 방식, 현재 널리 쓰이는 함수형 컴포넌트의 이벤트 핸들러를 다루는 방식에 대해서 알아보자. 클래스 컴포넌트의 이벤트 핸들러 클래스 컴포넌트는 이벤트 핸들러를 정의하고 사용할 때, 반드시 bind() 메서드를 사용해야 한다. bind()메서드를 사용해서 이벤트 핸들러와 컴포넌트 인스턴스를 바인딩 해줘야 하는 이유는 클래스 컴포넌트 내부에서 함수가 호출될 때 함수 내부의 this는 컴포넌트 자체를 가리키지 않기 때문이다. 컴포넌트 인스턴스가 아니라 엘리먼트를 가리키게 될 수 있다는 것이다. import React from 'react'; export default cla.. 2023. 8. 28. [ 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 ] 리액트 컴포넌트의 생명주기 ( 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. 이전 1 2 다음
