1. Props

---

Props

💡 부모 컴포넌트로부터 받아온 데이터를 props

props로 값 전달하기

// src/App.js

import React from "react";

function App() {
  return <GrandFather />;
}

function GrandFather() {
  return <Mother />;
}

function Mother() {
	const name = '홍부인';
  return <Child motherName={name} />; // 💡"props로 name을 전달했다."
}

function Child(props) {
  console.log(props) // '흥부인'
  return <div>{props.motherName}</div>; // 렌더링
}

export default App;

위의 예제에서는 먼저 Mother이라는 컴포넌트에서 자식 컴포넌트인 Child 에게 motherName={name} 을 써서 motherName이라는 이름으로 props써서 name을 전달 하였다.

children props

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

기존의 props 값을 지정해서 보내주지 않아도, 자식 컴포넌트 안에 값을 넣고 자식 컴포넌트에서 {props.children} 하면 렌더링이 된다. 이 기술은 레이아웃 만들 때 용이하다고 한다.

2. State

State

💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
생성하려면 useState()이란 훅을 사용해야된다.

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
					props.setName("박할아"); // 드디어 받은 setName을 실행합니다.
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 받아서 다시 주고
  );
}

function GrandFather() {
  
 /* useState hook으로 'name' 이라는 state 값과, setName이라는 name을 변경할 수 있는 값을 설정해 준다*/
// 그 후, 하위 컴포넌트에 state 값들을 props로 보내준다. 
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />; // 주고
}

function App() {
  return <GrandFather />;
}

export default App;

위의 예제 같이 state는 현재 존재하는 state값과 변경할 수 있는 setState 값으로 지정할 수 있다.
그런데 state값을 막 자유자재로 바꾸는 것은 좋지만, 절대하면 안되는 것이 있는데, 그것은 바로 원본을 훼손하지 않는 것이다. 그 중에 원시데이터가 아닌 데이터의 불변성을 지켜주는 것이 가장 중요하다.
(원시 데이터는 불변성이 있지만, 그 외의 배열, 객체, 함수는 불변성이 없음)

이때 필요한 것이 바로 깊은 복사.. spread operator를 사용하는 것이다..!!

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

---

3. 반복되는 컴포넌트

같은 컴포넌트를 여러번 쓰기에는 가독성이 떨어지고 효율도 별로라서 우리는 배열을 훑는 map 을 활용을 하여 컴포넌트를 반복시킨다.

💡 map 정말 잘 쓰인다. foreach, filter와 더불어.. mdn을 달달 외우자..!
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

예시는 다음과 같다

import React from "react";

function User(props) {
  const squareStyle = {
    width: "100px",
    height: "100px",
    border: "1px solid green",
    borderRadius: "10px",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  };
  return (
    <div style={squareStyle}>
      <div>{props.user.age}살 - </div>
      <div>{props.user.name}</div>
    </div>
  );
}

function App() {
  const style = {
    padding: "100px",
    display: "flex",
    gap: "12px",
  };

  const users = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ];

  return (
    <div style={style}>
      {users.map((user) => {
        return <User user={user} key={user.id} />;
      })}
    </div>
  );
}

export default App;

위의 예제에서 map은 {users.map((user) => { return <User user={user} key={user.id} />; })} 이렇게 쓰였는데, User라는 컴포넌트에 user의 정보를 순회하고 각각의 정보를 주입해준다.

key 란?

💡 react에서는 map을 쓸 때 꼭 'key' 를 써줘야한다. (안그럼 에러가 날지도 몰라용~)
key가 필요한 이유는 react에서 컴포넌트 배열을 렌더링했을 때 각각의 원소에서의 변화가 있는지 알아내기 위함이다. key를 넣어 이 값으로 어떤 변화가 있었는지 virtual dom이 빠르게 알아낼 수 있다. => ket = react 최적화

• 사용 예

  <div style={style}>
      {users.map((user) => {
        return <User user={user} key={user.id} />;
      })}
    </div>

4. style component

jsx에서 사용되는 css in js 관련 리액트 라이브러리를 style component 라고 한다.

styled-components 설치

먼저 VScode 내에서 styled-components 플러그인을 설치

그 후 npm i styled-components 하여 라이브러리 설치해주기

styled-components 사용하기

import React from "react";
// styled-components에서 styled 라는 키워드를 import 합니다.
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div`
	// 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다.
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

const App = () => {
	// 그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.
  return <StBox>박스</StBox>;
};

export default App;

style-components는 jsx 내에서 변수 내에 css 용어를 섞는 기법이며, 현업에서도 많이 사용되고 있다고 한다.
그리고 이 기법에서의 강점은 style에 조건부 (삼항연산자, if, case 등)을 달 수 있다는 것이다..!

styled-components 리팩토링

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

const App = () => {
	// 박스의 색을 배열에 담습니다.
  const boxList = ["red", "green", "blue"];

  // 색을 넣으면, 이름을 반환해주는 함수를 만듭니다.
  const getBoxName = (color) => {
    switch (color) {
      case "red":
        return "빨간 박스";
      case "green":
        return "초록 박스";
      case "blue":
        return "파란 박스";
      default:
        return "검정 박스";
    }
  };

  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
  );
};