컴포넌트의 사용 중 컴포넌트 내부에서 변할수있는 값
외부로부터 전달받은 값
컴포넌트의 속성(property)을 의미한다
<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"}
<Child>
에 전달function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
<p>{props.text2}</p>
</div>
);
};
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>
);
};
컴포넌트 내에서 변할수 있는 값(상태)을 React state로 다뤄 만약 상태가 변경된다면 변경된 부분만 리렌더링해서 상태에 따라 사용자의 화면을 변경한다.
즉, React 컴포넌트는 state가 변경되면 새롭게 호출되고 리렌더링 된다.
React에서는 state 를 다루는 방법 중 하나로 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>
);
}
리액트의 이벤트 처리는 DOM의 이벤트 처리와 비슷하지만 몇 가지 문법적 차이가 있다.
<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>
);
}
리액트는 위에서 아래로 흐르는 단방향 데이터 흐름을 따른다.
컴포넌트는 props를 통해 전달받은 데이터가 어디서 왔는지 전혀 알지 못한다.
props 컴포넌트의 속성으로 객체의 형태이며, 변하지 않아 자식 컴포넌트에게 물려줄수 있다.
state는 컴포넌트에서 변할 수 있는 값으로 useState를 사용해서 다룰 수 있다.
cost [상태저장변수, 상태갱신함수] = useState(초기상태)
리액트의 데이터 흐름은 하향식이다
자바스크립트 돔보다는 쉬운 것 같다. 과제할 때 unshift로 이벤트핸들러 작성하고 싶었는데 계속 오류나서 포기했다. map쓸 때 키 안 넣어으니깐 계속 에러 나니깐 꼭 넣기!
그리고 오타 조심하기 vlaue인가로 오타났던 건지 계속 자동완성도 이걸로 나와서 이걸로 다 썼다가 겨우 찾았다.. ㅋㅋㅋ
배열 합칠때 [arr1, ...arr2] 막상 쓸려고 하면 왜 기억이 안날까..