토이프로젝트 썸네일형 리스트형 [React] 배열에서 랜덤 추출 후 출력하기 방학이 어느덧 끝나가네요. 학기중에도 프로젝트 계속 진행해 보려고 합니다! 지난 시간에 이어서 버튼을 한 개 추가 해보겠습니다. function Snack(){ const navigate = useNavigate(); const [snack,setSnack] = useState("snack") return ( 과자 {navigate("/")}}>홈 {navigate("/getsnack")}}>과자 뽑기 ) } 과자 뽑기 버튼을 누르면 과자를 뽑아주는 getsnack페이지로 이동하도록 만들었습니다. input과 button 컴포넌트를 사용해서 과자 뽑기 페이지를 만들었습니다. 하지만 홈 버튼이 너무 안보이죠? unction GetSnack(){ const navigate = useNavigate(); co.. 더보기 [React] useNavigate를 사용해 상세페이지 만들기 안녕하세요! 오늘은 버튼을 누르면 상세페이지로 이동하게 만들어 보는 시간을 가져보겠습니다. 출발해 볼까요 : - ) 위에 보시면 있는 노란색 버튼을 누르면 각각 과자페이지, 라면페이지 등으로 이동하는 기능을 구현해 보겠습니다. 먼저 상세페이지를 만들려면 React-Router-Dom이라는 것을 사용하는 것이 일반적입니다. 이걸 먼저 설치해 줍시다. 새 터미널을 여시고 npm install react-router-dom@6를 입력해 주시면 됩니다. 설치가 완료되면 index.js로 이동합니다. import {BrowserRouter} from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root... 더보기 [React]를 사용하는 토이프로젝트 시작! 방학동안 열심히 놀았네요. 늦었지만 지금이라도 작은 토이프로젝트를 시작해보려고 합니다. 저는 과자를 꾸준히 사먹는 편입니다. 하지만 먹고싶은 것을 가득 쌓아놓고 막상 먹으려 하면 결정장애가 오곤합니다. 그래서 이번 프로젝트로 만드려는 것은 카테고리 별로 과자를 나눠서 임의로 먹을 과자를 선택해주는 프로그램입니다. 그럼 시작해볼까요! 개발은 VSC(Visual Studio Code)를 사용하는 React 웹앱을 만드려고 합니다. 먼저 프로젝트 파일들을 집어넣을 폴더를 만들어 줍니다. 초기 설정하는 법은 폴더를 만들고 Shift + 우클릭 후 파워쉘을 연다음 npx create-react-app 폴더이름 이렇게 코드치시면 됩니다. 그리고 터미널에 npm start를 치고 잘 구동되는지 확인합니다. 저는 기존.. 더보기 이전 1 다음
