수업을 듣고 내용을 정리한 글입니다.

삼항연산자를 이용한 조건부 렌더링

조건부 렌더링은 && 기호를 이용해서 뿐만이 아닌 삼항연산자를 이용해서도 구현할 수 있습니다. && 와 다른 점은 값이 false 일 때의 반환값을 지정해 줄 수 있다는 점입니다.

const Ternary = () => {
	const shouldRender = true;

	return <div>{shouldRender ? <h1>Render Allowed!</h1> : <h1>Render Denied!</h1>}</div>;
};

위 코드에서는 shouldRender 의 값에 따라서 <h1>Render Allowed!</h1> 가 반환될지 <h1>Render Denied!</h1> 가 반환될지 결정됩니다.

props 에 state , callback function 넘겨주기

const App = () => {
	const [username, setUsername] = React.useState();

  const handleChange = (e) => {
		setUsername(e.target.value);
  };

  return (
		<div>
      <p>이름이 어떻게 되시나요?</p>
      <input type="text" onChange={handleChange} />
      <Welcome username={username} />
    </div>
  );
};

const Welcome = ({ username }) => {
	return <div>{username && `만나서 반갑습니다, ${username}님!`}</div>;
};

const App = () => {
	const [answer, setAnswer] = React.useState(true);

	return (
		<div>
			<h1>나는 지금 배고프다. T or F ? </h1>
			<Test answer={answer} setAnswer={setAnswer} />
		</div>
	);
};

const Test = ({ answer, setAnswer }) => {
  return (
    <div onClick={() => setAnswer(!answer)}>
      <b>{String(answer)}</b>
    </div>
  );
};

useState 로 input 여러개 관리하기

import React from "react";

const Form = () => {
	const [formData, setFormData] = React.useState({
		firstName: "",
		lastName: "",
		email: "",
	});

	const handleChange = (e) => {
		setFormData((prev) => {
			return {
				...prev,
				[e.target.name]: e.target.value,
			};
		});
		// 이렇게도 쓸 수 있어요!
		// setFormData({ ...formData, [e.target.name]: e.target.value });
	};

	return (
		<div>
			<input type="text" onChange={handleChange} name="firstName" />
			<input type="text" onChange={handleChange} name="lastName" />
			<input type="text" onChange={handleChange} name="email" />
		</div>
	);
};