S2 unit6 | [React] Props & State 상태와 속성으로 이벤트 처리하기
📌 Props & State 의 개념
👩 나의 속성과 상태
속성 : 이름, 성별
상태 : 감정, 나이, 직업
Props(속성) :
(1) 부모 컨포넌트로부터 전달받은 값
(2) 변하지 않는 값
(3) 변하지 않는 값이기 때문에 읽기 전용
(4) 어떤 형태도 넣을 수 있도록 객체 형태
State(상태) :
(1) 컴포넌트 사용 중 컴포넌트 내부에서 변화하는 값
📌 props 전달 방법
1. 부모 컴포넌트에서 불러온 자식 컴포넌트에 key와 그 값으로 전달
const Parent = () => {
const word = '나는 자식 컴포넌트';
return (
<div>
<h2>나는 부모 컴포넌트</h2>
<Child word={word} /> //word는 전해지는 props의 키이다.
</div>
)
}
const Child = (props) => {
return (
<div>
<h2>저는 무엇일까요?</h2>
<div>{props.word}</div> // 부모 컴포넌트에서 전해진 props
</div>
)
}2. 여는 태그와 닫는 태그 사이에 값만 전달
const Parent = () => {
const props = '나는 자식 컴포넌트';
return (
<div>
<h2>나는 부모 컴포넌트</h2>
<Child>{props}</Child>
</div>
)
}const Child = (props) => {
return (
<div>
<h2>저는 무엇일까요?</h2>
<div>{props.children}</div> // 부모 컴포넌트에서 전해진 props의 키가 자동으로 children이 됨
</div>
)
}📌 state 사용 방법
import { useState } from "react";우선 react에서 useState를 import 해야 사용할 수 있다.
const [상태, 상태변경함수] = useState(초기값)useState()는 배열을 반환하는데 그 0번째 값이 상태이고, 1번째 값이 상태변경함수이므로 구조분해할당으로 작성해준다.
상태변경함수(전달인자)
=> 상태 === 상태변경함수
(❗) 상태는 상태변경함수로만 변경해야 한다. 임의적으로 할당한 상태는 렌더링 시 오류를 일으킬 수 있다.
📌 이벤트 처리
HTML에서의 이벤트 처리 방법
<button onclick="handleEvent()">Event</button>React에서의 이벤트 처리 방법
<button onClick={handleEvent}>Event</button>- 차이점
(1) React에서는 camel case로 이벤트를 작성한다.
(2) JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.
onChange
: input의 텍스트가 변경될 때마다 이벤트 발생
onClick
: 클릭될 때마다 이벤트 발생
이벤트 핸들러는 기본적으로 이벤트를 전달받음
e.targe으로 타겟의 속성을 받을 수 있음
📌 데이터 흐름
리액트 : 단방향 데이터 흐름(하향식)
웹앱을 만들 때, 컴포넌트 단위로 나누어 컴포넌트 먼저 만들고 조립 (상향식)
데이터를 속성으로 전해줄 수 있다. 리액트에서 데이터 흐름은 위에서 아래로만 흐르기 때문에 부모 컴포넌트에 데이터를 맡겨준다.
➰ 오답노트
1️⃣ Hello 컴포넌트에 name이라는 props 전달하는 방법으로 잘못된 것은?
const Hello = (props) => <div>{props.name}</div>A. 함수 선언식
function Say() {
return (
<Hello name="walli" />
)
}
B. 함수 표현식
const Say = () => <Hello name={"walli"} />
C. name이라는 변수에 값을 할당하여 전달하는 방식
function Say() {
const name = "walli";
return <Hello name={name} />;
}
D. props 객체에 값을 할당하여 spread syntax로 전달하는 방식
function Say() {
const props = {
name: "walli"
};
return <Hello {...props} />;
}
E. ❌props 자체를 전달했으므로 에러 발생
const Say = () => <Hello props={name: "walli"} />2️⃣ 빈 칸이 알맞게 채워진 답을 모두 고르세요.
import React, { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
const plusNumber = () => setNumber(number + 1);
const minusNumber = () => setNumber(number - 1);
return(
<div className="App">
<h1>{number}</h1>
<button onClick=___________>Plus</button>
<button onClick={minusNumber}>Minus</button>
</div>
);
};
A. {plusNumber} ⭕
B. {plusNumber()}
이벤트에 함수를 전달할 때는 함수를 호출하는 게 아니라 리턴문 안에서 함수를 정의하거나 리턴문 외부에서 함수 정의 후 이벤트에 함수 자체를 전달해야 함.
C. {() => plusNumber}
함수 안에서 함수가 실행되어야 함
D. {() => setNumber(number => number + 1 )} ⭕
3️⃣ togglePopup 핸들러 함수는 button.open 엘리먼트를 클릭했을 때 작동하는 함수입니다. 이 함수가 showPopup 상태를 변경할 수 있도록 빈칸이 알맞게 채워진 답을 고르세요.
import React, { useState } from "react";
function App() {
const [showPopup, setShowPopup] = useState(false);
const togglePopup = () => {
// Pop up 의 open/close 상태에 따라
// 현재 state 가 업데이트 되도록 함수를 완성하세요.
if(1._______ === false) {
2._______ (true)
} else {
2._______ (false)
}
};
return (
<div className="App">
<h1>Fix me to open Pop Up</h1>
{/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
button tag를 완성하세요. */}
<button className="open" 3._______ >Open me</button>
{showPopup ? (
<div className="popup">
<div className="popup_inner">
<h2>Success!</h2>
<button className="close" onClick={togglePopup}>
Close me
</button>
</div>
</div>
) : null}
</div>
);
}A. 1.setShowPopup, 2.showPopup, 3.onClick={togglePopup}
B. 1.showPopup, 2.setShowPopup, 3.onClick={togglePopup} ⭕
=> showPopup : 상태, setShowPopup : 상태를 바꾸는 함수. 전달인자로 상태가 바뀜
C. 1.open, 2.close, 3.onClick={togglePopup}
D. 1.showPopup, 2.setShowPopup, 3.onClick={open}