2024.05.31 기록

포트폴리오 project 페이지(key)

Project.jsx:73 Warning: Each child in a list should have a unique "key" prop.

경고창 없애기 - 렌더링하는 과정에서 고유한 key가 있어야한다고 함

 const renderProjects = () => {
        return data.project.map((item) => (
        
        <article className='p_main' key={item.id} onMouseMove={mouseHandle}>
        .
        .
        </article>

처음부터 map에는 json에 id값을 넣어 key값으로 지정하고 있었다.
왜때문에..? ㅇㅂㅇ??
article 태그를 크게 감싸고 있는 외부라이브러리 문제였다.
똑같이 key={item.id} 키값을 추가했다.

            <motion.div
                key={item.id}
                initial={{ opacity: 0, y: 70 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: false }}
                transition={{
                    ease: "easeInOut",
                    duration: 1,
                    y: { duration: 1 },
                }}
            >
            </motion.div>

포트폴리오 about 페이지 수정 (toggle)

toggle은 true, 기본값으로 On 지정해놨다.

 let [isOn, setIsOn] = useState(true);

about창에 toggle컴포넌트를 불러왔었고
어떻게 toggle(자식) 상태값을 about(부모)이 받지...? ㅇㅂㅇ?
처음부터 app.js에서 시작했어야했나 싶었다.

1. about.jsx에서 상태값을 받아올 useState 선언하고

let [toggleIf, setToggleIf] = useState();

2. toggle 컴포넌트로 값을 받아올 setToggleIf 보냄

<ToggleBtn setToggleIf={setToggleIf} />

3. toggle 컴포넌트에서 setToggleIf 받고

function ToggleBtn({ setToggleIf }) {

let [isOn, setIsOn] = useState(true);

    const toggleOn = () => {
        setIsOn(!isOn)
        setToggleIf(isOn)
    }
}

4. toggleOn함수에 추가로 setToggleIf(상태값) 똑같이 받는다.

그러면 토글이 클릭될때마다 toggleOn 함수가 실행되고 toggle 상태값이 담긴다.
about컴포넌트에서 console.log(toggleIf) 토글이 클릭될떄마다 상태값 확인 가능!