[React] React State & Props 기본
Props
- 외부로부터 전달받은 값 즉, 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
1. Props의 특징
- props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환
- 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능
- props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가짐
- 함부로 변경될 수 없는 읽기 전용(read-only) 객체
2. Props 사용법
- 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의
- props를 이용하여 정의된 값과 속성을 전달
- 전달받은 props를 렌더링
- props 속성의 이름을 임의로 지정 가능
- props 속성의 이름을 props로 사용할 경우 Syntax Error발생 : 예약어이기 때문
*컴포넌트 자체의 관점에서 짓는 것을 권장
1) { props.key }
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"}/>
</div>
);
}
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
}
export default Parent;
- props는 객체이고 { key : value }는 Parent 컴포넌트에서 정의한 { attribute : value }의 형태
- props의 value : dot notation으로 접근 가능
2) { props.children }
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child>I'm the eldest child</Child>
</div>
);
}
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
}
export default Parent;
- 여는 태그와 닫는 태그의 사이에 value를 넣어 전달
- props.children을 이용하여 해당 value에 접근
State
- 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값
- 상태에 해당하는 데이터를 state로 따로 관리
- Controlled Component : React가 state를 통제할 수 있는 컴포넌트
2. state hook
- Hook이 나오기 전에는 state는 클래스 컴포넌트에만 다룰 수 있었으나, Hook이 나오면서 함수 컴포넌트도 state를 다룰 수 있게 됨
*class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줌
1) 주의사항
- React 컴포넌트 : state가 변경되면 새롭게 호출되고, 리렌더링
- React state는 상태 변경 함수 호출로 변경해야 함
*강제로 변경해선 안됨
2) useState
예시
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}
(1) React로부터 useState 불러오기
import { useState } from "react";
(2) useState를 컴포넌트 안에서 호출하기
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
//const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값)
- isChecked : 새롭게 선언한 state 변수
- [isChecked, setIsChecked]는 useState의 리턴값을 구조 분해 할당한 변수
*새로운 state를 선언할 때 배열로 구조 분해 할당하여 사용
(3) state 변수에 저장된 값 사용
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
- isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용
(4) state 갱신하기
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
- state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출
Event handling
- React의 이벤트 처리(Event handling) 방식은 DOM과 유사
1. React의 이벤트 처리 문법
- 소문자 대신 카멜 케이스(camelCase) 사용
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달
<button onclick="handleEvent()">Event</button>
//HTML의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>
//React의 이벤트 처리 방식
//onClick={handleEvent()} : 리턴값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라,
//함수의 결과값이 전달되며 렌더링할 때마다 해당 함수가 호출되기 때문에 성능 이슈가 우려
2. 자주 사용되는 이벤트 처리
1) onChange
- input, textarea, select와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데, 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트
- onChange : input의 텍스트가 바뀔 때 마다 발생하는 이벤트
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
//onChange 이벤트 발생시 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어옴
//이벤트가 발생하면 handleChange 함수가 작동하여 이벤트 객체에 담긴 input값을 setState를 통해 갱신
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
//input 태그에 value와 onChange를 넣어줌
<h1>{name}</h1>
</div>
)
};
2) onClick
- onClick : 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트로 버튼이나 a 태그를 통한 링크 이동 등 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용
- arrow function을 사용해야 해당 컴포넌트가 가진 state에 함수들이 접근 가능
// 함수 정의하기
return (
<div>
...
<button onClick={() => alert(name)}>Button</button>
...
</div>
);
};
// 함수 자체를 전달하기
const handleClick = () => {
alert(name);
};
return (
<div>
...
<button onClick={handleClick}>Button</button>
...
</div>
);
};
React 데이터
1. 데이터 흐름 VS 웹 어플리케이션 제작 흐름
1) 웹 어플리케이션 제작 흐름
- 상향식(bottom-up) : 프로토타입을 전달받으면 가장먼저 컴포넌트를 찾아 만든 후 페이지를 조립(확장성이 좋음)
*컴포넌트 : 단일 책임 원칙에 따라 하나의 컴포넌트는 한가지 일만 하도록 구분
2) 데이터 흐름 : 단방향 데이터 흐름(one-way data flow)
- 하향식(top-down) : props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 부모 컴포넌트로부터 전달받음
- 컴포넌트 : props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못합
2. 데이터 정의
- 부모로부터 props를 통해 전달됩니까?
- state 아님
- 시간이 지나도 변하지 않나요?
- state 아님
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요?
- state 아님
- 모든 데이터를 상태로 둘 필요는 없으며 상태는 최소화하는 것이 좋음
*상태가 많아질수록 애플리케이션은 복잡해지기 때문
3. React에서 데이터 다루기 : state 위치 정하기
- React에서 데이터를 다룰 때는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치 설정
- 상태가 특정 컴포넌트에서만 유의미할 경우 특정 컴포넌트에 둠
- 하나의 상태를 기반으로 두 컴포넌트가 영향을 받을 경우 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치
*두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치
Author And Source
이 문제에 관하여([React] React State & Props 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/React-State-Props-이해하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의
- props를 이용하여 정의된 값과 속성을 전달
- 전달받은 props를 렌더링
*컴포넌트 자체의 관점에서 짓는 것을 권장
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"}/>
</div>
);
}
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
}
export default Parent;
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child>I'm the eldest child</Child>
</div>
);
}
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
}
export default Parent;
- 컴포넌트 사용 중 컴포넌트 내부에서 변할 수 있는 값
- 상태에 해당하는 데이터를 state로 따로 관리
- Controlled Component : React가 state를 통제할 수 있는 컴포넌트
2. state hook
- Hook이 나오기 전에는 state는 클래스 컴포넌트에만 다룰 수 있었으나, Hook이 나오면서 함수 컴포넌트도 state를 다룰 수 있게 됨
*class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줌
1) 주의사항
- React 컴포넌트 : state가 변경되면 새롭게 호출되고, 리렌더링
- React state는 상태 변경 함수 호출로 변경해야 함
*강제로 변경해선 안됨
2) useState
예시
function CheckboxExample() { const [isChecked, setIsChecked] = useState(false); const handleChecked = (event) => { setIsChecked(event.target.checked); }; return ( <div className="App"> <input type="checkbox" checked={isChecked} onChange={handleChecked} /> <span>{isChecked ? "Checked!!" : "Unchecked"}</span> </div> ); }
(1) React로부터 useState 불러오기
import { useState } from "react";
(2) useState를 컴포넌트 안에서 호출하기
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
//const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값)
- isChecked : 새롭게 선언한 state 변수
- [isChecked, setIsChecked]는 useState의 리턴값을 구조 분해 할당한 변수
*새로운 state를 선언할 때 배열로 구조 분해 할당하여 사용
(3) state 변수에 저장된 값 사용
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
- isChecked가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용
(4) state 갱신하기
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
- state 변수를 갱신할 수 있는 함수인 setIsChecked를 호출
Event handling
- React의 이벤트 처리(Event handling) 방식은 DOM과 유사
1. React의 이벤트 처리 문법
- 소문자 대신 카멜 케이스(camelCase) 사용
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달
<button onclick="handleEvent()">Event</button>
//HTML의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>
//React의 이벤트 처리 방식
//onClick={handleEvent()} : 리턴값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라,
//함수의 결과값이 전달되며 렌더링할 때마다 해당 함수가 호출되기 때문에 성능 이슈가 우려
2. 자주 사용되는 이벤트 처리
1) onChange
- input, textarea, select와 같은 폼(Form) 엘리먼트는 사용자의 입력값을 제어하는데, 변경될 수 있는 입력값을 일반적으로 컴포넌트의 state로 관리하고 업데이트
- onChange : input의 텍스트가 바뀔 때 마다 발생하는 이벤트
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
//onChange 이벤트 발생시 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어옴
//이벤트가 발생하면 handleChange 함수가 작동하여 이벤트 객체에 담긴 input값을 setState를 통해 갱신
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
//input 태그에 value와 onChange를 넣어줌
<h1>{name}</h1>
</div>
)
};
2) onClick
- onClick : 사용자가 클릭이라는 행동을 하였을 때 발생하는 이벤트로 버튼이나 a 태그를 통한 링크 이동 등 주로 사용자의 행동에 따라 애플리케이션이 반응해야 할 때 자주 사용
- arrow function을 사용해야 해당 컴포넌트가 가진 state에 함수들이 접근 가능
// 함수 정의하기
return (
<div>
...
<button onClick={() => alert(name)}>Button</button>
...
</div>
);
};
// 함수 자체를 전달하기
const handleClick = () => {
alert(name);
};
return (
<div>
...
<button onClick={handleClick}>Button</button>
...
</div>
);
};
React 데이터
1. 데이터 흐름 VS 웹 어플리케이션 제작 흐름
1) 웹 어플리케이션 제작 흐름
- 상향식(bottom-up) : 프로토타입을 전달받으면 가장먼저 컴포넌트를 찾아 만든 후 페이지를 조립(확장성이 좋음)
*컴포넌트 : 단일 책임 원칙에 따라 하나의 컴포넌트는 한가지 일만 하도록 구분
2) 데이터 흐름 : 단방향 데이터 흐름(one-way data flow)
- 하향식(top-down) : props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 부모 컴포넌트로부터 전달받음
- 컴포넌트 : props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못합
2. 데이터 정의
- 부모로부터 props를 통해 전달됩니까?
- state 아님
- 시간이 지나도 변하지 않나요?
- state 아님
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요?
- state 아님
- 모든 데이터를 상태로 둘 필요는 없으며 상태는 최소화하는 것이 좋음
*상태가 많아질수록 애플리케이션은 복잡해지기 때문
3. React에서 데이터 다루기 : state 위치 정하기
- React에서 데이터를 다룰 때는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치 설정
- 상태가 특정 컴포넌트에서만 유의미할 경우 특정 컴포넌트에 둠
- 하나의 상태를 기반으로 두 컴포넌트가 영향을 받을 경우 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치
*두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치
Author And Source
이 문제에 관하여([React] React State & Props 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@sominpark/React-State-Props-이해하기
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
- 소문자 대신 카멜 케이스(camelCase) 사용
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(Event handler)를 전달
<button onclick="handleEvent()">Event</button>
//HTML의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>
//React의 이벤트 처리 방식
//onClick={handleEvent()} : 리턴값이 onClick으로 전달되어서 함수 자체가 전달되는 것이 아니라,
//함수의 결과값이 전달되며 렌더링할 때마다 해당 함수가 호출되기 때문에 성능 이슈가 우려
function NameForm() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
//onChange 이벤트 발생시 e.target.value를 통해 이벤트 객체에 담겨있는 input 값을 읽어옴
//이벤트가 발생하면 handleChange 함수가 작동하여 이벤트 객체에 담긴 input값을 setState를 통해 갱신
return (
<div>
<input type="text" value={name} onChange={handleChange}></input>
//input 태그에 value와 onChange를 넣어줌
<h1>{name}</h1>
</div>
)
};
// 함수 정의하기
return (
<div>
...
<button onClick={() => alert(name)}>Button</button>
...
</div>
);
};
// 함수 자체를 전달하기
const handleClick = () => {
alert(name);
};
return (
<div>
...
<button onClick={handleClick}>Button</button>
...
</div>
);
};
1. 데이터 흐름 VS 웹 어플리케이션 제작 흐름
1) 웹 어플리케이션 제작 흐름
- 상향식(bottom-up) : 프로토타입을 전달받으면 가장먼저 컴포넌트를 찾아 만든 후 페이지를 조립(확장성이 좋음)
*컴포넌트 : 단일 책임 원칙에 따라 하나의 컴포넌트는 한가지 일만 하도록 구분
2) 데이터 흐름 : 단방향 데이터 흐름(one-way data flow)
- 하향식(top-down) : props를 이용해 데이터를 마치 인자(arguments) 혹은 속성(attributes)처럼 부모 컴포넌트로부터 전달받음
- 컴포넌트 : props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못합
2. 데이터 정의
- 부모로부터 props를 통해 전달됩니까?
- state 아님
- 시간이 지나도 변하지 않나요?
- state 아님
- 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가요?
- state 아님
- 모든 데이터를 상태로 둘 필요는 없으며 상태는 최소화하는 것이 좋음
*상태가 많아질수록 애플리케이션은 복잡해지기 때문
3. React에서 데이터 다루기 : state 위치 정하기
- React에서 데이터를 다룰 때는 컴포넌트들간의 상호 관계와 데이터의 역할, 데이터의 흐름을 고려하여 위치 설정
- 상태가 특정 컴포넌트에서만 유의미할 경우 특정 컴포넌트에 둠
- 하나의 상태를 기반으로 두 컴포넌트가 영향을 받을 경우 공통 소유 컴포넌트를 찾아 그 곳에 상태를 위치
*두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 상태를 위치
Author And Source
이 문제에 관하여([React] React State & Props 기본), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sominpark/React-State-Props-이해하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)