삼항 연산자를 활용한 조건부 렌더링
function Body() {
const num = 200;
if (num % 2 === 0) {
return <div> {num} is 짝수입니다 </div>;
} else {
return <div> {num} is 홀수입니다 </div>;
}
// return (
// <>
// <h2>
// {num} is {num % 2 === 0 ? "짝수" : "홀수"} 입니다.{" "}
// </h2>
// </>
// );
}삼항 연산자는 간결하지만 가독성을 해칠 우려가 있다. 조건문은 가독성은 좋으나 중복 코드 발생 우려가 있다.
컴포넌트에 값 전달하기
import React from "react";
import "./Body.css";
function Body({ name, location, favorList }) {
console.log(name, location, favorList);
return (
<div className="body">
{name}은 {location}에 거주합니다. <br />
{favorList.length}개의 음식을 좋아해용.
</div>
);
}
Body.defaultProps = {
favorList: [],
};
export default Body;import "./App.css";
import Body from "./component/Body";
import Footer from "./component/Footer";
import Header from "./component/Header";
function App() {
const BodyProps = {
name: "혜승",
location: "서울시",
nickName: "Hailey",
favorList: ["파스타", "빵", "떡볶이"],
};
return (
<div className="App">
<Header />
<Body {...BodyProps} />
<Footer />
</div>
);
}
export default App;샌드위치 = 빵(컴포넌트) + (햄 or 야채 : props)
Props로 컴포넌트 전달하기
import "./App.css";
import Body from "./component/Body";
import Footer from "./component/Footer";
import Header from "./component/Header";
function ChildComponent() {
return <div>Child component</div>;
}
function App() {
return (
<div className="App">
<Header />
<Body>
<ChildComponent />
</Body>
<Footer />
</div>
);
}
export default App;import React from "react";
import "./Body.css";
function Body({ children }) {
console.log(children);
return <div className="body">{children}</div>;
}
export default Body;
이벤트 처리하기
function Body() {
function handleOnClick(e) {
console.log(e);
console.log(e.target.name);
}
return (
<div className="body">
<button name="A버튼" onClick={handleOnClick}>
A 버튼
</button>
<button name="B버튼" onClick={handleOnClick}>
B 버튼
</button>
</div>
);
}
컴포넌트와 상태
import { useState } from "react";
import "./Body.css";
function Body() {
const [text, setText] = useState("");
const handleOnChange = (e) => {
setText(e.target.value);
};
return (
<div>
<input value={text} onChange={handleOnChange} />
<div>{text}</div>
</div>
);
}
export default Body;1. 입력 폼에서 사용자가 텍스트 입력
2. onChange 이벤트 발생 -> handleOnChange 호출
3. handleOnChange 내부에서 set 함수 호출 -> 인수로 사용자 입력 텍스트 전달
4. 사용자 입력 값은 text에 저장되면서 State값 업데이트
5. State가 업데이트 되면 컴포넌트는 리렌더
6. 페이지는 현재 State값을 토대로 다시 렌더링
'개발 > React.js' 카테고리의 다른 글
| Excel 파싱 관련 (0) | 2024.09.13 |
|---|---|
| React Storybook 사용 방법 (0) | 2024.09.13 |
| [React-Native] warn Multiple Podfiles were found 에러, Looks like your iOS environment is not properly set 에러 해결 (0) | 2022.11.27 |
| [React.js] React-saga의 이펙트 fork / call / take / takeEvery / takeLatest / throttle (0) | 2022.11.16 |
| [React.js] Redux-saga Generator 개념 (0) | 2022.11.16 |