# State
[React] state 변경시 setState로 변경해야 하는 이유
state는 immutble(불변성)을 유지해야 하기 때문이다.state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데, 이것을 업데이트 하기 위해서는 setState,useState가 필요하다. 직접 state를 수정하면 리액트는 render 함수를 호
[React] props와 state의 차이
둘 다 리액트 컴포넌트에서 다루는 데이터로. React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.properties의 줄임말불변의 데이터부모 컴포넌트로 부터 상속을 받는다.읽기전용이다.변경이 불가하다.컴포넌트의 상태를 나타낸다.컴포넌트 내부에서 선
[React] state as snapshot, batching
(이벤트 핸들러가 비동기라고 해도) 상태 변수의 값은 렌더시 절대 변하지 않습니다. 렌더시 onClick 내부를 살펴보면, number의 value는 setNumber(number + 5)호출 뒤에도 0 입니다. 리액트가 컴포넌트를 호출하여 UI의스냅샷을 찍을 때 va
Unit6 회고
🔅 Props > props란❓ 외부, 즉 부모(상위) 컴포넌트로부터 전달 받은 값을 말하는데 이는 함부로 변경될 수 없는 읽기 전용(read-only) 객체이다. 만약 props가 읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직
[리액트] 3. 컴포넌트(2)
3. 컴포넌트 3-3. state(상태) state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. 리액트에는 두 가지 종류의 state가 있다. 클래스형 컴포넌트가 지니고 있는 state이 있고, 함수 컴포넌트에서 useState 함수를 통해 사용할 수도 있다.
TIL) React State & Props
State살면서 변할 수 있는 값Props vs. Stateprops는 외부로부터 전달받은 값state는 내부에서 변화하는 값
[React] State 사용하기
1. State 란 state는 데이터를 가지고 있는 객체이다. 사용하는 쪽과 구현하는 쪽을 분리하여 각 방향에서 편의성이 높다. 2. import 3. 변수 선언 아래의 코드와 같이 생성하고, useState 함수 안의 인자에 초기값을 넣어주면 state와 se
[React] state와 props 차이
React를 공부하면 항상 언급되는 state와 props.state와 props는 렌더링에 영향을 미치는 중요한 요소이다.컴포넌트에 어떤 것을 사용해야할 지 알기 위해이 두 가지 요소에 대해 정리해보자.두 요소의 공통적인 요소는 자바스크립트 객체로, 렌더가 업데이트되
리액트 정리(2). state의 정의 및 사용방법
리액트에서의 state 정의 및 사용방법 > 일반 자바스크립트에서는 데이터를 저장하기 위해 let 변수이름 = '데이터'; 라는 식으로 변수에 데이터를 저장했었다. 하지만 리액트에서는 보통 변수 말고, state를 만들어서 데이터를 저장한다. 데이터의 값이 잘변 하지
[React] State & useState
state는 컴포넌트 내부에서 읽고 업데이트 할 수 있는 값이다 초깃값을 설정-> 렌더링 -> 업데이트 이런 과정으로 이루어진다버튼을 클릭해도 count는 증가하지 않는다→ why? 컴포넌트를 한번만 렌더링 되고 있기 때문이다.UI 가 업데이트 되지 않았기 때문에 화
React_Props,State
프로퍼티(properties)의 줄임말컴포넌트에게 어떠한 값을 전달할 때 props를 사용위 코드대로도 실행은 가능하나, Header 컴포넌트 안에 HTML 태그를 하드코딩해줘야 함은 변함이 없음 ex. 1."WEB"을 수정한다고 가정하면 Header안을 수정해줘야 함
TIL14 라우터 이동할 때마다 특정 컴포넌트의 스타일 바꾸기
리액트로 쇼핑몰 만들고 있다. 위와 같이 Login 부분의 폰트 컬러를 페이지마다 다르게 하고 싶었다.store.js에 다음과 같이 state를 만들고"/Main", "/Men"로 라우터 이동해서 각각의 컴포넌트가 렌더링 될 때마다 위에서 만든 state를 ""값 혹은
React 객체안의 배열의 값을 수정해보자.
상품을 관리하는 상태를 수정해야할 일이 생겼다.보통의 state를 수정할 때는 간단하게 spread문법을 사용하여 수정을 하면 됐지만,ex) 해당 키의 값을 입력한 값으로 바꾸는 코드하지만 내가 수정해야할 부분은,상품은 여러개의 상품 그룹으로 구성하여 추가할 수 있고,
React - Recoil
리코일 공식 홈페이지나의 경우에 리코일을 알게된, 사용하게된 경위는프로젝트 진행 도중 기한이 다가오는데 여러 feature가 병합되는 과정에서각 기능별 상호작용 부분에서 props , state 관련 이슈가 생겨서이를 트러블슈팅하는 치트키로 사용하게된 케이스이다..해당
