state

[React] Props(불변 객체, Prop Drilling)

결, 꼬재랑 함께하는 레벨2 방학 스터디 😀 Props 컴포넌트에 어떠한 값을 전달할 때 props를 사용한다. 여기서 props는 properties의 줄임말이다. props는 부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드(static method)를 통해 전달할 수도 있다. props는 불변성을 가진 읽기 전용이다. porps 예시 // 함수 컴포넌트 function Coke(props){ return Hello, {props.name}; } // 클래스 컴포넌트 class Coke extends React.Component{ render(){ return Hello, {this.props.name}; } } // 비구조화 할당(구조 분해 할당) function..

[React] State의 모든 것(feat.batch)

결, 꼬재랑 함께하는 레벨2 방학 스터디 State state는 React에서 데이터를 다루기 위한 객체이다. 컴포넌트에 전달되는 props와 같이 컴포넌트의 렌더링에 영향을 주지만 state는 컴포넌트 안에서 제어된다는 차이점이 있다. state의 값이 변경되면 리렌더링 된다. state값을 변경 시키기 위해서는 setState를 호출하면 된다. 상태를 직접 변경하지 않고 굳이 setState()를 사용하는 이유가 무엇일까요? state는 불변성(immutable)을 유지해야 하기 때문이다. setState는 비동기적으로 동작하기 때문에 state를 직접 수정하면 이전 업데이트 된 데이터가 다음 업데이트 될 데이터에 영향을 줘서 예상하지 못한 버그가 발생하기 때문이다. 따라서 setState로만 sta..

[ReactJS]노마드코더 리액트 기초-04. State

노마드코더-"ReactJS로 영화 웹 서비스 만들기"강의를 수강하며 공부한 내용입니다. state React.js에서는 유동적인 데이터를 사용하기 위해 state 객체를 사용한다. props는 매개변수처럼 컴포넌트에 전달되지만 state는 컴포넌트 내에서 관리된다. props와 다르게 state 값을 변경할 때는 직접 조작해서는 안되며 setState 메서드를 사용해야 한다. setState 메서드를 사용하는 이유는 React는 state가 변경될 때마다 변경된 부분을 감지하여 리렌더링 하기 때문에 직접 state를 조작하면 React는 변경된 부분을 감지하지 못한다. state를 사용하여 버튼을 누르면 카운트 되는 예제 import React from "react"; class App extends R..