본문 바로가기

State5

[리액트] 클래스형 컴포넌트에서 일반함수, 화살표 함수 사용하는 방법 방법 1) 화살표 함수 사용 클래스에서 화살표 함수를 사용하는 방식은 정식 클래스 컴포넌트 문법은 아니다 다만 일반 함수를 사용할 경우 bind를 해줘야하는 번거로움이 있기 때문에 자주 사용한다 import React, { Component } from 'react' class Count extends Component { state = { number: 0 } countUp = () => { this.setState({ number: this.state.number + 1 }) } render() { return ( { this.state.number } +1 ) } } export default Count 방법 2) 일반 함수 사용 정식 클래스 컴포넌트 문법은 constructor를 사용해 state.. 2022. 8. 9.
[리액트/한줄정리] props와 state란? props 자식 컴포넌트가 부모 컴포넌트한테 전달받은 데이터 부모에게 전달받은 state 값 state 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터 본인 컴포넌트에 설정되어 있는 state 값 2022. 4. 12.
[리액트] 클래스형, 함수형 컴포넌트에서 state 값 관리하기 (state 설정과 업데이트) state란 컴포넌트 내부에서 설정하고 바꿀 수 있는 데이터를 의미한다. 클래스형 컴포넌트와 함수형 컴포넌트가 state를 설정하고 업데이트하는 방법에는 차이가 있다. 클래스형 컴포넌트 import React from 'react'; class StateClass extends React.Component { constructor(props) { super(props); this.state = { name: 'maple', }; } onClick = () => { this.setState({ name: 'lavender', }); }; render() { return ( 안녕하세요 저는 {this.state.name}입니다 이름을 라벤더로 바꾸기 ); } } export default StateClass.. 2022. 4. 12.
[리액트] 리액트에서 state를 직접 수정하면 안되는 이유 (데이터의 불변성) state란? state는 컴포넌트 내부적으로 사용되는 값을 말하며 state 값이 업데이트 될때 리액트 전체가 리렌더링이 된다. 리액트에서 state를 직접 수정하는 예제 (잘못된 방법) import React from "react"; class App extends React.Component { constructor(props) { super(props); this.state = { animals: ["cat", "elephant", "dolphin"] }; } // setState()함수 안에서 기존 animals 배열에 "dog"를 직접 추가했다 onClick = () => { this.setState({ animals: ["cat", "elephant", "dolphin", "dog"] }) .. 2022. 4. 8.
[리액트] 스프레드 문법으로 state에 값 추가해주기 1. 스프레드 문법(spread operator)이란? 자바스크립트의 스프레드 문법은 배열이나 객체 앞에 ...을 붙여 안에 있는 모든 요소를 복사해 꺼내주는 문법이다. 일반적으로 요소를 밖으로 꺼내준 후 다른 배열이나 오브젝트에 할당할때 사용된다. 리액트에서 스프레드 문법은 concat 메서드와 같이 state에 값을 추가할때 사용된다. 2. 자바스크립트 스프레드 문법 예시 2.1 배열 const array = [1, 2, 3, 4]; newArray = [...array, 5]; console.log(newArray) // [1, 2, 3, 4, 5] 코드해석 1) array이라는 변수에 배열 [1, 2, 3, 4]가 할당되어있다 2) 스프레드 오퍼레이터(...) 문법으로 array에 있는 모든 값을.. 2022. 4. 8.

티스토리툴바