📖State와 Props
state
컴포넌트의 사용 중 컴포넌트 내부에서 변할수있는 값
props
외부로부터 전달받은 값
컴포넌트의 속성(property)을 의미한다
- 데이터가 state인지 판단하는 법
만약 부모로부터 props를 통해 전달 => state 아님
시간이 지나도 변하지 않음 => state 아님
컴포넌트 안의 다른 state나 props를 가지고 계산 가능 => state 아님
🏷️Props의 특징
- 객체의 형태이다
- 함부로 변경될 수 없는 읽기 전용 객체이다.(만약 변경된다면 자식 컴포넌트를 수정하면 부모의 컴포넌트까지 변경될 수 있음)
- Props를 사용하며 자식 컴포넌트에게 객체의 형태로 부모의 데이터를 물려줄 수 있다
🏷️사용방법
<Parent>,<Child>컴포넌트 선언
<Parent>컴포넌트 안에<Child>컴포넌트를 작성
function Parent() {
return (
<div className="parent">
<Child text={"I'm the eldest child"} text2={"I'm the second child"}/>
</div>
//props로 {text: "I'm the eldest child", text2: "I'm the second child"} 전달
//또는
<Child text={"I'm the eldest child"} />
<Child text2={"I'm the second child"} />
// props로 {text: "I'm the eldest child"}, {text2: "I'm the second child"}- props을
<Child>에 전달
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
<p>{props.text2}</p>
</div>
);
};- 속성말고 태그사이 value에 넣을 경우
childrend 이용하면 value 접근할 수 있음
function Parent() {
return (
<div className="parent">
<Child>I'm the eldest child</Child>
</div>
function Child() {
return (
<div className="child">
<p>{props.children}</p> //childrend 이용하면 value 접근할 수 있음
</div>
);
};📖State
컴포넌트 내에서 변할수 있는 값(상태)을 React state로 다뤄 만약 상태가 변경된다면 변경된 부분만 리렌더링해서 상태에 따라 사용자의 화면을 변경한다.
즉, React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링 된다.
🏷️useState
React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공한다.
🏷️useState 사용법
-
useState불러오기
import { useState } from "react"; -
useState호출하기
useState를 호출하면 배열을 반환한다. 이 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.
const [state 저장 변수, state 갱신 함수] = 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} />
// 변경이 생기면 handleChecked 함수 호출
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
// isChecked의 상태가 true인지 false인지에 따라 값 변경
</div>
);
}
- 주의점
React state는 상태 변경 함수 호출로 변경해야 한다. 만약 강제로 변경을 한다면 리렌더링이 되지 않거나, state가 제대로 변경되지 않을 수 있다.
📖 이벤트 처리
리액트의 이벤트 처리는 DOM의 이벤트 처리와 비슷하지만 몇 가지 문법적 차이가 있다.
- 리액트에서 이벤트는 소문자 대신 카멜 케이스(camelCase) 사용
- JSX를 사용하여 문자열이 아닌 함수로 이벤트 처리 함수(이벤트 핸들러)를 전달한다.
<button onClick={handleEvent}>Event</button>
import React, { useState } from "react";
function NameForm() {
const [name, setName] = useState("");
// 이름의 상태를 담을 name과 이름의 상태를 갱신할 함수 setName
const handleChange = (e) => {
setName(e.target.value);
};
// 이벤트 핸들러(이벤트가 발생하면 이벤트 타겟의 값을
// setName함수에 전달하여 이름의 상태를 갱신한다)
const handleClick = () => {
alert(name);
};
return (
<div className="App">
<h1>Event handler practice</h1>
<input type="text" value={name} onChange={handleChange}></input>
<button onClick={handleClick}>Button</button>
// 또는 리턴문 안에서 이벤트 핸들러 정의하지 않고 외부에서 정의해 함수 자체 전달도 가능
// <button onClick={() => alert(name)}>Button</button>
<h3>{name}</h3>
</div>
);
}📖React 데이터 흐름
리액트는 위에서 아래로 흐르는 단방향 데이터 흐름을 따른다.
컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.
✏️ 회고
props 컴포넌트의 속성으로 객체의 형태이며, 변하지 않아 자식 컴포넌트에게 물려줄수 있다.
state는 컴포넌트에서 변할 수 있는 값으로 useState를 사용해서 다룰 수 있다.
cost [상태저장변수, 상태갱신함수] = useState(초기상태)
리액트의 데이터 흐름은 하향식이다
자바스크립트 돔보다는 쉬운 것 같다. 과제할 때 unshift로 이벤트핸들러 작성하고 싶었는데 계속 오류나서 포기했다. map쓸 때 키 안 넣어으니깐 계속 에러 나니깐 꼭 넣기!
그리고 오타 조심하기 vlaue인가로 오타났던 건지 계속 자동완성도 이걸로 나와서 이걸로 다 썼다가 겨우 찾았다.. ㅋㅋㅋ
배열 합칠때 [arr1, ...arr2] 막상 쓸려고 하면 왜 기억이 안날까..
