jeong_ga

위 이미지와 같이 마우스를 갖다대면 밑줄이 생기는 코드를 작성했다! 기존엔 backgound-color, border를 사용해서 작업했기 때문에 가상선택자를 이용하여 작성한 코드도 따로 기록해 놓으려고 한다. /*more view btn*/ .tabelLink { position: absolute; bottom: 20px; right: 20px; width: 120px; height: 30px; line-height: 30px; text-align: center; border-radius: 5px; transition: all 300ms ease-in; } .tabelLink::before { position: absolute; display: block; content: ""; bottom: 0; wi..

아직은 redux를 사용하지 않기 때문에! 가장 상위에서 다른 하위 컴포넌트가 사용할 state를 생성하여 props로 전달해서 사용하고 있는데 상위가 하위에게 변경된 값을 전달해주는 것은 가능하나 하위 컴포넌트에서 변경된 값이 상위 컴포넌트에게 전달되는 것은 불가능했다. 나는 app.js react-router-dom를 사용하여 route를 만들었기 때문에 가장 상위인 app.js에서 useState를 생성하여 하위 컴포넌트인 route에게 값을 전달했다. -> 하위 컴포넌트들은 onClick이벤트가 발생하여 useState의 값이 변경되면 이 값을 상위 컴포넌트인 app.js에게 전달시켜줘야 했음! 📍 App.js > Home.js > Nav & Header & Container & Footer 의 ..

data는 50~51개의 인덱스를 가진 json data로 만들었음! button이 제대로 됐는지 확인하고 싶어서 51개로 늘려봄 table을 만드는 것까지만이기 때문에 페이지 및 컴포넌트의 이름은 table로 작성 이런 오류가 발생한다면 !! 👉 Warning: validateDOMNesting(...):cannot appear as a child of. Add a,orto your code to match the DOM tree generated by the browser. 📍react에선 tbody와 thead를 작성해야 오류가 발생하지 않음!!! home에서 보는 위젯 table import { useState, useEffect } from "react"; import axios from "ax..

동일한 컴포넌트를 가지고 mediaQuery와 useState를 이용하여 navigation을 만들었다. css가 useState의 값을 조절할 수는 없어 화면의 사이즈에 상관없이 useState의 기본값으로 nav가 표현되었다. 이를 수정하기 위해 현재 윈도우의 사이즈를 확인하여 useState의 값을 변경하는 함수를 만들었다! 모바일에서는 useState의 값이 false, nav가 안 보이는 것이 기본 값 PC 사이즈에서는 useState의 값이 true, nav가 보이는 것이 기본 값 으로 추가 설정함! 참고 블로그 import { useState, useEffect } from "react"; const [btn, setBtn] = useState(true); // button을 클릭하여 nav..