React TIL 05
2021년 7월 12일에 작성된 문서 1번 입니다.
React 배운 내용을 정리했습니다.
Props & State Intro
State VS Props
-
state는 내부에서 변화하는 값
- 나이
- 현재 사는 곳
- 취업 여부
-
props는 외부로부터 전달받은 값
- 이름
- 성별
- ON/OFF 스위치 토글의 State
{isOn : true}
{isOn : false}
- 카운터 버튼의 State
// 현재 숫자 값
{count : 0}
{count : 3}
{count : 6}
Props
props의 특징
- 웹 어플리케이션의 컴포넌트의 속성(property)을 의미. (외부로부터 전달받은 값)
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값.
- React 컴포넌트는 JavaScript 함수와 클래스로, props를 함수의 전달인자(arguments)처럼 전달받아 React 엘리먼트를 반환한다.
- 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용할 수 있다.
- props로 어떤 타입의 값도 넣어 전달할 수 있도록 props는 객체의 형태를 가진다.
- props는 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용(read-only) 객체다.
Props
- 하위 컴포넌트에 전달하려는 값(data)과 속성을 정의한다.
- props를 써서 정의된 값과 속성을 전달한다.
- 전달받은 props를 렌더링 한다.
- props를 사용하기 위해
<Parent>
,<Child>
컴포넌트를 선언하고,<Parent>
컴포넌트 안에<Child>
컴포넌트를 작성한다.
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child />
</div>
);
};
function Child() {
return (
<div className="child"></div>
);
};
//<Parent>, <Child> 컴포넌트 선언
- 전달하고자 하는 속성을 정의한다. (React 에서 속성 및 값을 할당하는 방법 : 전달하고자 하는 값을
중괄호 {}
를 이용하여 감싼다.)
// Child에 값과 속성을 정의 (대략적인 형식임.)
<Child attribute={value} />
//1. text 라는 속성을 선언
//2. 이 속성에 "I'm the eldest child"라는 문자열 값을 할당
//3. <Child> 컴포넌트에 전달
<Child text={"I'm the eldest child"} />
- 이제
<Parent>
컴포넌트에서 전달한"I'm the eldest child"
라는 문자열을<Child>
컴포넌트에서 받는다. (함수에 인자를 전달하듯, React 컴포넌트에 props 를 전달하면 되고, 이 props 가 필요한 모든 데이터를 가지고 온다.)
function Child(props) {
return (
<div className="child"></div>
);
};
//<Child> 컴포넌트에서 props 매개변수 사용
- props를 전달 받았으니, 이 props 를 렌더링 한다. props 를 렌더링하려면 JSX 안에 직접 불러서 사용하면 되지만, props 는 객체고, 이 객체의
{ key : value }
는<Parent>
컴포넌트에서 정의한{ attribute : value }
의 형태를 띈다. 따라서 JavaScript 에서 객체의 value 에 접근할 때 dot notation 을 사용하는 것과 동일하게 props 의 value 또한 dot notation 으로 접근할 수 있다.
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
};
//<Child> 컴포넌트에서 props.text 렌더링
props.children
props 를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value 를 넣어 전달할 수 있다. 이 경우 props.children
을 이용하면 해당 value 에 접근하여 사용할 수 있다.
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>
);
};
State
컴포넌트 내에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야 한다.
State hook, useState
useState 사용법
React에서는 state 를 다루는 방법 중 하나로 useState
함수를 제공한다.
useState
를 이용하기 위해서 React로부터useState
를 불러와야 한다.
import { useState } from "react";
// useState 불러오기 (import 사용)
- 이후
useState
를 컴포넌트 안에서 호출한다.useState
를 호출한다는 것은 "state" 라는 변수를 선언하는 것과 같고, 이 변수의 이름은 아무 이름으로 지어도 된다. 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
function CheckboxExample() {
// 새로운 state 변수를 선언
// 여기서는 이것을 isChecked로 이름을 지음.
const [isChecked, setIsChecked] = useState(false);
//isChecked, setIsChecked는 useState의 리턴값을 구조 분해 할당한 변수
//useState 문법
function CheckboxExample() { // useState 구조 분해 할당
// 1번 코드를 풀어쓰면
const [isChecked, setIsChecked] = useState(false); // 1번
// 2번 코드와 같다.
const stateHookArray = useState(false); // 2번
const isChecked = stateHookArray[0];
const setIsChecked = stateHookArray[1];
}
useState
를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수다.useState
의 인자로 넘겨주는 값은 state의 초기값.
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);
- 수도코드를 실제 코드로 작성 하면,
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수]
// = useState(state 초기 값);
isChecked
: state를 저장하는 변수setIsChecked
: stateisChecked
를 변경하는 함수useState
: state hookfalse
: state 초기값
- state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용. 여기서는
isChecked
가 boolean 값을 가지기 때문에true
orfalse
여부에 따라 다른 결과가 보이도록 삼항연산자를 사용.
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
State 갱신하기
- state를 갱신하려면 state 변수를 갱신할 수 있는 함수인
setIsChecked
를 호출.
input[type=checkbox]
엘리먼트의 값이 변경되면onChange
이벤트가 발생.- 사용자가 체크박스 값을 변경하면
onChange
이벤트가 이벤트 핸들러 함수인handleChecked
를 호출하고, 이 함수가setIsChecked
를 호출. setIsChecked
가 호출되면 호출된 결과에 따라isChecked
변수가 갱신되며, React는 새로운isChecked
변수를CheckboxExample
컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링.
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>
);
}
// 컴포넌트의 상태가 변경 될 때 마다 새롭게 호출되고, 리렌더링
Written with StackEdit.
Author And Source
이 문제에 관하여(React TIL 05), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heewonkim-dev/React-TIL-05저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)