부트캠프교육중/react80 [노마드코더]내가 약했던 id값에 대한것(id이용법) 지금 하는 부분은 일단 내가 뭘 하고자 할때 어찌 건들여야할지 전혀 짐작이 안됬던 부분이다. 근데 이부분이 공부할때 잘 몰랐던 useParams랑 관계있는 거였다. 지금 내가 하는 작업은 일단 id값이 얼마인지 알아보는 작업이다. detail컴포넌트에서 저걸 추가하면 된다. import { useParams } from "react-router-dom"; const x = useParams(); console.log(x); 이렇게 된다. import { useParams } from "react-router-dom"; function Detail() { const x = useParams(); console.log(x); return detail다; } export default Detail; x부분을 .. 2023. 8. 3. [노마드코더] 페이지따라 id적용하기 일단 페이지 구성은 영화 제목을 누르면 그 영화에 대해서 상세페이지로 연결이 된다. 즉, 영화 제목누르면 detail 컴포넌트로 연결이 된다. 그래서 detail페이지로 들어갔을때 url이 /movie/4564654 이런식으로 되야한다. 그래서 기존에 이렇게 되어있던 코드를 밑의 코드로 바꿨다. 그리고 Home 컴포넌트로 넘어가서 id를 부여했다. 밑의 코드처럼 {movies.map(movie => ( ))} 그리고 movie컴포넌트로 가서 link부분에 id를 추가했다. 기존의 이거를 {title} 밑의 코드로 바꿨다. {title} 2023. 8. 3. [노마드코더] 리액트 작동원리 & useEffect 리액트는 간단하게 작동한다 state를 변화시킬때 component를 재실행시키는것이다.(모든 코드가 재실행) UI관점에서 보면, 새로운 데이터가 들어올때마다 자동으로 새로고침되니 좋은 일이긴한데, 이때 모든 component를 재실행시키면 비효율적이니까 그리고 계속 실행되면 안되는 코드도 있을수 있고, 여기서 useEffect가 나온거다. (useEffect 사용이유) 의존성배열에 따라서 또 실행이 안되고 되는걸 만든거다. 참고할 코드 import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); cons.. 2023. 8. 1. [노마드 코더] cleanup function function Hello(){ function byFn(){ console.log("bye :("); } function hiFn(){ console.log("created :)"); return byFn; } useEffect(hiFn, []); return Hello; } hiFn을 한번누르면 created가 console되고 한번 더 누르면 byFn인 bye가 console된다. 2023. 7. 31. 이전 1 ··· 5 6 7 8 9 10 11 ··· 20 다음