boxes challenge

아래의 코드를 살펴보자

App.js

import React from "react"
import boxes from "./boxes"

export default function App() {
    const [squares, setSquares] = React.useState(boxes)
    
    const squareElements = squares.map(square => (
        <div className="box" key={square.id}></div>
    ))
    /**
     * Challenge part 1:
     * 1. Initialize state with the default value of the
     *    array pulled in from boxes.js
     * 2. Map over that state array and display each one
     *    as an empty square (black border, transparent bg color)
     *    (Don't worry about using the "on" property yet)
     */
    return (
        <main>
            {squareElements}
        </main>
    )
}

state 저렇게 해주고
map한거까지는 혼자 할 수 있었는데

  <div className="box" key={square.id}></div>

여기서 key부분을 빼먹어서 계속 오류 났었다...

박스 만들어주기 위해 style.css에는 이렇게 작성해줌

* {
    box-sizing: border-box;
}

.box {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    display: inline-block;
    margin-right: 4px;
}

똑같은 이 프로젝트에 style넣어주는것도 배웠는데

index.js에

ReactDOM.render(<App darkMode={false} />, document.getElementById("root"))

이렇게 props을 darkMode={false}로 설정해주고

App.js에서

import React from "react"
import boxes from "./boxes"

export default function App(props) {
    const [squares, setSquares] = React.useState(boxes)
    
    const styles = {
        backgroundColor: props.darkMode ? "#222222" : "#cccccc"
    }
    
    const squareElements = squares.map(square => (
        <div style={styles} className="box" key={square.id}></div>
    ))
    return (
        <main>
            {squareElements}
        </main>
    )
}

이 부분을 삼항 연자로 props.darkMode가 true면 #222222색으로
아니면 다른색으로 이렇게 설정해주었다.

boxes.js 보면

export default [
    {
        id: 1,
        on: true
    },   
    {
        id: 2,
        on: false
    },   
    {
        id: 3,
        on: true
    },   
    {
        id: 4,
        on: true
    },   
    {
        id: 5,
        on: false
    },   
    {
        id: 6,
        on: false
    },   
]

이렇게 되어있는데 on이 true인지 false인지에 따라
색깔을 다르게 설정해보는걸 연습해보자.

새로운 component인 Box를 만들어주었다.

import React from "react";

export default function box(props) {
  const styles = {
    backgroundColor: props.on ? "#222222" : "none",
  };
  return <div style={styles} className="box"></div>;
}

props받을 수 있게 props넣어줬고 props.on이면 #222222 아니면
아무 색깔도 안 넣어주는걸로 설정해주고
div에 style 저렇게 넣어줬음.

App.js를 살펴보자

import React from "react";
import boxes from "./boxes";
import Box from "./Box";

export default function App(props) {
  const [squares, setSquares] = React.useState(boxes);

  const squareElements = squares.map((square) => {
    return <Box key={square.id} on={square.on} />;
  });

  return <main>{squareElements}</main>;
}

Box import해줬고
on을 저렇게 props설정해줬음..흠...솔직히 아직도 props 개념에 관해
긴가민가한게 많다.. 일단 강의 끝까지 듣고 다시 정리해서 공부해보도록 해야겠다.