State와Props 활용
import "./App.css";
import { useState } from "react";
import Bulb from "./components/Bulb";
import Counter from "./components/Counter";
//함수 컴포넌트 리랜더링 -> App함수 재호출하고 바뀐 값을 재랜더링
//자신이 관리하는 state 값 변경시 , 자신이 제공 받는 props값이 변경시
//부모 component 리랜더링시 자신도 리랜더링 -> 위 3가지 경우 리랜더링
// 컴포넌트를 나누어 불필요한 리랜더링 방지
function App() {
return (
<>
<Bulb />
<Counter />
</>
);
}
export default App;
import { useState } from "react";
const Bulb = () => {
//[state값 , 변경시킬 함수]
const [light, setLight] = useState("off");
// let light="off"
return (
<div>
{light === "on" ? (
<h1 style={{ backgroundColor: "orange" }}>on</h1>
) : (
<h1 style={{ backgroundColor: "gray" }}>off</h1>
)}
<div>
<button
onClick={() => {
setLight(light === "on" ? "off" : "on");
// 스테이트의 상태가 변한게 아니므로 리랜더링X
// light = light === "on" ? "off" : "on";
}}
>
{light === "on" ? "끄기" : "켜기"}
</button>
</div>
</div>
);
};
export default Bulb;
import { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h1>{count}</h1>
<button
onClick={() => {
setCount(count + 1);
}}
>
+
</button>{" "}
</div>
);
};
export default Counter;
단순 활용
import { useState } from "react";
//간단한 회원가입 폼
//이름 , 생년월일 , 국적 , 자기소개
//State를 이용한 저장법
const Register = () => {
const [name, setName] = useState("이름");
const [birth, setBirth] = useState("");
const [country, setCountry] = useState("");
const [bio, setBio] = useState("");
//이벤트 핸들러
const onChangeName = (e) => {
setName(e.target.value);
};
const onChangeBirth = (e) => {
setBirth(e.target.value);
};
const onChangeCountry = (e) => {
setCountry(e.target.value);
};
const onchangeBio = (e) => {
setBio(e.target.value);
};
return (
<div>
<div>
{/* input의 값이 변경 되었을 때 : onChange
placeholder : 인풋 내부에 흐린 글씨로 표시
value는 onchange내 함수 호출시 state의 name에 값 저장*/}
<input value={name} onChange={onChangeName} placeholder={"이름"} />
</div>
<div>
<input value={birth} onChange={onChangeBirth} type="date" />
</div>
<div>
<select value={country} onChange={onChangeCountry}>
<option value=""></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
{country}
</div>
<div>
<textarea value={bio} onChange={onchangeBio} />
</div>
</div>
);
};
export default Register;
State및 EventHandler효율적으로 통합
import { useState } from "react";
//간단한 회원가입 폼
//이름 , 생년월일 , 국적 , 자기소개
//State를 이용한 저장법
const Register = () => {
// const [name, setName] = useState("이름");
// const [birth, setBirth] = useState("");
// const [country, setCountry] = useState("");
// const [bio, setBio] = useState("");
//이벤트 핸들러
// const onChangeName = (e) => {
// setName(e.target.value);
// };
// const onChangeName = (e) => {
// setInput({
// //...input 스프레드 연산자로 다른 프로퍼티(속성) 값들을 그대로 유지 가능
// //누락시 다른 속성들이 사라져버림
// ...input,
// name: e.target.value,
// });
// };
// console.log(input);
//State를 객체로 만들어 통합하여 관리
const [input, setInput] = useState({
name: "",
birth: "",
country: "",
bio: "",
});
//4개의 이벤트 핸들러 압축 (통합 핸들러)
//onChange함수 실행 -> setInput 상태변화 함수 호출 -> 인수로 객체를 만들어저장
//스프레드 연산자로 input값 나열 -> 프로퍼티 키 명시 위치에 ([여기])
//여기에 변수의 이름을 기재시 값이 프로퍼티 키로 설정가능
const onChange = (e) => {
//e.target.name은 아래 birth bio등 값이 들어감
console.log(e.target.name, e.target.value);
setInput({
...input,
[e.target.name]: e.target.value,
});
};
return (
<div>
<div>
{/* input의 값이 변경 되었을 때 : onChange
placeholder : 인풋 내부에 흐린 글씨로 표시
value는 onChange내 함수 호출시 state의 name에 값 저장
name은 핸들러 타겟의 이름 설정 */}
<input
name="name"
value={input.name}
onChange={onChange}
placeholder={"이름"}
/>
</div>
<div>
<input
name="birth"
value={input.birth}
onChange={onChange}
type="date"
/>
</div>
<div>
<select name="country" value={input.country} onChange={onChange}>
<option value=""></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
</div>
<div>
<textarea name="bio" value={input.bio} onChange={onChange} />
</div>
</div>
);
};
export default Register;
useRef 추가 적용
import { useState, useRef } from "react";
//간단한 회원가입 폼
//이름 , 생년월일 , 국적 , 자기소개
//State를 이용한 저장법
const Register = () => {
// const [name, setName] = useState("이름");
// const [birth, setBirth] = useState("");
// const [country, setCountry] = useState("");
// const [bio, setBio] = useState("");
//이벤트 핸들러
// const onChangeName = (e) => {
// setName(e.target.value);
// };
// const onChangeName = (e) => {
// setInput({
// //...input 스프레드 연산자로 다른 프로퍼티(속성) 값들을 그대로 유지 가능
// //누락시 다른 속성들이 사라져버림
// ...input,
// name: e.target.value,
// });
// };
// console.log(input);
//State를 객체로 만들어 통합하여 관리
//useState 리랜더링 되더라도 리셋되지않고 유지
const [input, setInput] = useState({
name: "",
birth: "",
country: "",
bio: "",
});
//reference는 state와 비슷하지만 리랜더링X
const countRef = useRef(0);
const inputRef = useRef();
//Register컴포넌트가 계속 리랜더링 되면서 전체를 재호출하므로 count=1이 고정
//전역으로 설정하면 영향을 받진 않지만 App.jsx에서 Register컴포넌트를
//여러번 호출시 컴포넌트간 전역변수를 공유하므로 바람직하지않음
//필요하다면 useRef를 활용하는게 좋음
let count = 0;
//4개의 이벤트 핸들러 압축 (통합 핸들러)
//onChange함수 실행 -> setInput 상태변화 함수 호출 -> 인수로 객체를 만들어저장
//스프레드 연산자로 input값 나열 -> 프로퍼티 키 명시 위치에 ([여기])
//여기에 변수의 이름을 기재시 값이 프로퍼티 키로 설정가능
const onChange = (e) => {
//e.target.name은 아래 birth bio등 값이 들어감
// console.log(e.target.name, e.target.value);
// countRef.current++;
count++;
console.log(count);
setInput({
...input,
[e.target.name]: e.target.value,
});
};
const onSubmit = () => {
if (input.name === "") {
//이름을 입력하는 DOM 요소 포커스(선택된 상태)
//console.log(inputRef.current);
inputRef.current.focus();
}
};
return (
<div>
<div>
{/* input의 값이 변경 되었을 때 : onChange
placeholder : 인풋 내부에 흐린 글씨로 표시
value는 onChange내 함수 호출시 state의 name에 값 저장
name은 핸들러 타겟의 이름 설정 */}
<input
ref={inputRef}
name="name"
value={input.name}
onChange={onChange}
placeholder={"이름"}
/>
</div>
<div>
<input
name="birth"
value={input.birth}
onChange={onChange}
type="date"
/>
</div>
<div>
<select name="country" value={input.country} onChange={onChange}>
<option value=""></option>
<option value="kr">한국</option>
<option value="us">미국</option>
<option value="uk">영국</option>
</select>
</div>
<div>
<textarea name="bio" value={input.bio} onChange={onChange} />
</div>
<button onClick={onSubmit}>제출</button>
</div>
);
};
export default Register;
Hook 추가
import useInput from "../hooks/useInput";
// 훅 : classComponent의 기능을 functionComponent에서도 사용가능하도록 끌어오는 것
// 종류가 20가지정도로 상당히 많음 -> useState , useRef등도 여기 포함됨
import { useState } from "react";
// 훅은 반드시 함수 컴포넌트or커스텀 훅 내부에서만 호출 가능
// 조건부로 호출 될 수는 없다 -> 조건문이나 반복문 안에서 호출 할 수 없다.
// ->컴포넌트를 호출하여 랜더링시 서로 다른 훅의 순서가 꼬일 수 있어 막아뒀다.
// 개발자가 임의로 만드는 customHook을 직접 만들 수 있다
const HookExam = () => {
const [input, onChange] = useInput();
const [input2, onChange2] = useInput();
return (
<div>
<input value={input} onChange={onChange} />
<input value={input2} onChange={onChange2} />
</div>
);
};
export default HookExam;
import { useState } from "react";
//훅은 컴포넌트 와 별개로 훅 폴더에 따로 저장해주는게 좋음
//커스텀 훅 : 함수명앞에use를 붙여주면 훅으로 인식함
function useInput() {
const [input, setInput] = useState("");
const onChange = (e) => {
setInput(e.target.value);
};
return [input, onChange];
}
export default useInput;