box-challenge #local state #unified state

전의 그 박스첼린지에서 박스를 클릭하면
색이 반대로 바뀌는 걸 연습했다.
근데 이거 하는데 방법이 두개 있다고 하는데
하나는 각각 component마다 state를 바꿔주는거다.
일단 첫번째 이 방법 하는걸 보자...
후 아직 개념이 완벽하게 정리가 안되있어서 솔직히
이 부분부터 혼자 하는게 막힌다.. 그냥 하는걸 보면 이해가 가기는 함..
또르륵

Box.js에서

import React from "react"

export default function Box(props) {
    const [on, setOn] = React.useState(props.on)
    
    const styles = {
        backgroundColor: on ? "#222222" : "transparent"
    }
    
    function toggle() {
        setOn(prevOn => !prevOn)
    }
    
    return (
        <div style={styles} className="box" onClick={toggle}></div>
    )
}

저렇게 state를 설정해주고... 원래 상태를 props.on으로 해줬기에
밑에 backgroundColor 줄에서는 그냥 on으로 바꿔줬음.
그리고 event handler배웠던대로 onClick과 function 써줬음..
이거 강의 보면 코드 이해가고 다 배운건데 직접 구현하기에는
아직 무리가 있음 ㅠㅠ 심지어 예전꺼보고 그냥 붙여넣기 하려고 해도
헷갈리는 점이 있는듯..... 다시 복습 열심히 해야할거같다.

다음으로 App.js에 toggle을 만들어주고 그 toggle을 전달해주는 방법이 있는데 이 방법을 더 추천한다고 함..
코드를 살펴보자

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

export default function App() {
    const [squares, setSquares] = React.useState(boxes)
    
    function toggle(id) {
        console.log(id)
    }
    
    const squareElements = squares.map(square => (
        <Box 
            key={square.id} 
            id={square.id}
            on={square.on} 
            toggle={toggle}
        />
    ))
    
    return (
        <main>
            {squareElements}
        </main>
    )
}

function toggle저렇게 만들어주고
박스부분에 passing 해줌.. toggle = {toggle} 이렇게

그리고 Box.js에서는

import React from "react"

export default function Box(props) {
    
    const styles = {
        backgroundColor: props.on ? "#222222" : "transparent"
    }
    
    return (
        <div 
            style={styles} 
            className="box"
            onClick={props.toggle}
        >
        </div>
    )
}

이렇게 props로 passing 받은 다음
onClick={props.toggle} 이렇게 써줬음...
근데 박스 각자의 id를 받아야하는데 위에 거처럼만 쓰면
각자의 아이디만 받을수 없음 그래서 이렇게 바꿔줘야함.

 onClick={()=>props.toggle(props.id)}

이렇게 쓰면 각 박스 누를때마다 각 아이디 숫자가 나옴..
지금 console.log(id)이렇게 써줬으니까 나오는거ㅋㅋ

그럼 본격적으로 어떻게 간단하게 이걸 구현하는지 살펴보자

App.js에서

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

export default function App() {
    const [squares, setSquares] = React.useState(boxes)
    
    function toggle(id) {
        setSquares(prevSquares => {
            return prevSquares.map((square) => {
                return square.id === id ? {...square, on: !square.on} : square
            })
        })
    }
    
    const squareElements = squares.map(square => (
        <Box 
            key={square.id} 
            id={square.id}
            on={square.on} 
            toggle={toggle}
        />
    ))
    
    return (
        <main>
            {squareElements}
        </main>
    )
}

이 전체적인 코드에서 이 부분을 살펴보자

    function toggle(id) {
        setSquares(prevSquares => {
            return prevSquares.map((square) => {
                return square.id === id ? {...square, on: !square.on} : square
            })
        })
    }

map으로 array에 있는 애들을 감싸준다음에 박스 하나의 id가 toggle function에 전해준 id와 같으면, 다른 애들은 그대로 두고 on부분만
반대로 바꿔주고, id가 다르면 그냥 그대로 두는거를 이렇게 코드로 표현한거다.

흠 결과는 아주 간단한데... 구현하는건 은근히 복잡하구나...^^;
역시 코딩은 쉬운게 아니야 ㅋㅋㅋㅋ
혼자 구현해보는 시간을 가져봐야겠다.