[React] React Props Object

React Props Object는 컴포넌트를 불러올 때 다양한 매개변수를 넘겨주고 properties를 object 형식으로 받으면서 컴포넌트 내에서 매개변수 값을 사용할 수 있는 방법이다.

Index.js

// Index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

App.js

import "./styles.css";
import Test from "./Test";

export default function App() {
  return (
    <div>
      <Test 이름="배유정" 취미="잠" 특징="INTP" 키={168} 군필 = {false}/>
      <Test 이름="김호현" 취미="잠" 특징="INTP" 키={185} 군필 = {true} />
      <Test 이름="백서진" 취미="연애" 특징="INFP" 키={173} 군필 = {true} />
      <Test 이름="강민제" 취미="릴스" 특징="ISTP" 키={178} 군필 = {true} />
    </div>
  );
}

App.js 에서 Test 컴포넌트를 불러오고 <Test /> 안에서 매개변수를 위와 같이 작성해주면 Test.js 파일에서 각 컴포넌트마다 매개변수를 받아 처리할 수 있다.

Test.js

export default function Test(props) {
  return (
    <div>
      <h1>Hello, This is {props.이름}</h1>
      <p>My hobby is playing {props.취미}</p>
      <p>My MBTI is {props.특징}</p>
      <p>My age is {props.키}</p>
      {props.군필 && <p>그는 군필이다</p>}
    </div>
  );
}

Test() 함수안에 props로 받아서 값들에 접근할 수 있다. 방법은 props.{넘겨준 이름}을 중괄호로 한번 더 감싸주어서 사용하면 값들을 모두 받을 수 있다.

조건부 렌더링

App.js

import "./styles.css";
import Test from "./Test";

export default function App() {
  return (
    <div>
      <Test 이름="배유정" 취미="잠" 특징="INTP" 키={168} 군필 = {false}/>
      <Test 이름="김호현" 취미="잠" 특징="INTP" 키={185} 군필 = {true} />
      <Test 이름="백서진" 취미="연애" 특징="INFP" 키={173} 군필 = {true} />
      <Test 이름="강민제" 취미="릴스" 특징="ISTP" 키={178} 군필 = {true} />
    </div>
  );
}

Test.js

export default function Test(props) {
  return (
    <div>
      <h1>Hello, This is {props.이름}</h1>
      <p>My hobby is playing {props.취미}</p>
      <p>My MBTI is {props.특징}</p>
      <p>My age is {props.키}</p>
      {props.군필 && <p>그는 군필이다</p>} // 조건부 렌더링
    </div>
  );
}

Test.js 코드를 보면 조건부 렌더링 부분이 있는데 props.군필 안에는 True 또는 False가 받아지는데 True 라면 && 뒤에 있는 내용을 렌더링하고 False라면 렌더링 하지 않는 조건부 렌더링 방법이다. App.js 파일에서 첫번째 태그에서는 "그는 군필이다" 라는 내용이 출력되지 않을 것이고 나머지 3개의 태그들에는 그는 군필이다가 출력될 것 이다.

Props 함수

배열의 인덱스나 id로 상태를 바꾸고 싶다면 어떻게 할 수 있을까?

먼저 그 컴포넌트 안에서 State로 관리를 할 수 있지만 그닥 좋은 방법은 아니다
관리해야 하는 State가 너무 많아지기 떄문에 부모에서 함수를 처리하려고 한다

import React from 'react'

const Box = ({ id, on, toggle }: { id: number; on: boolean; toggle: (id: number) => void }) => {
const styles = {
backgroundColor: on ? '#222' : '#ccc',
}

return <div onClick={() => toggle(id)} style={styles} id="box"></div>
}

export default Box

위와 같이 자식 컴포넌트에게 부모 컴포넌트의 함수를 주고, 그 함수로 자식 컴포넌트의 아이디를 넘겨주면 부모 컴포넌트에서 특정 값을 처리할 수 있다.

import React from 'react'
import boxes from './boxes'
import Box from './Box'

const App = () => {
	const [squares, setSquares] = React.useState(boxes)

	const onChange = (id: number) => {
		setSquares((prev) => {
			return prev.map((square) => {
				return square.id === id ? { ...square, on: !square.on } : square
			})
		})
	}

	return (
		<main>
			{squares.map((square) => (
				<Box key={square.id} id={square.id} on={square.on} toggle={onChange} />
			))}
		</main>
	)
}

export default App

이렇게 작성하면 map으로 하나씩 뽑아내면서 내용을 바꾸어 줄 수 있다.