리액트 4

글 리스트가 있을 때 해당 글을 클릭하면 해당 페이지로 이동이 되는 기능을 만들려고 한다. props를 통해 데이터를 전달하는 것 까지는 이해가 되는데, onClick이벤트에 대한 정리가 잘 되지 않아 이 부분에 대한 흐름만 정리해본다. 코드는 길어질 수 있으니 import부분과 export 부분 생략 후 작성했다. 아래 코드 작성을 해둔걸 한 눈에 볼 수 있게 하나의 이미지로 만들어봤다. 🌼 PostListItem.jsx //PostListItem.jsx function PostListItem(props){ const { post, onClick} = props; return ( {post.title} ); } div를 클릭했을 때 props를 통해 받아온 onClick을 사용한다. 🌼 PostList..

클론코딩 영화 평점 웹 서비스를 보며 따라하는 중이다. 오늘이 마지막 작업이라 생각하고 완성 뒤 수차례 반복할 예정이었는데, 오류가 계속 났다. 이건 어제 블로그에 올린 글 중 캡쳐..- - 과거의 나 손들어... 흐린눈 할 게 아니었다. 버전은 늘 새로운 버전이 좋은 것만은 아니기도 하고, 새 버전을 쓰고 싶으면 프로젝트별로 버전을 다르게 쓰면 될 일이었다. 버전이 다르면 기능도 많이 달라지기 때문에 무언가를 따라할 땐 버전을 맞춰줘야 하는데.. 과거의 내가 이 앞 다른 강의 따라할 때 그 버전 그대로 설치했나 했더니 그 버전은 17버전. 나는 18버전. 책은 16버전..... 범인 찾았다. 테스트로 npx create-react-app 플젝명을 통해 리액트를 설치해보니 위와 같이 18버전이 설치된다...

🌼 해결하는 흐름대로 작성한거라 해결 완료방법은 가장 아래에 :) 💎오류 발생 상황 react-router-dom을 사용해서 라우터를 만들어서 컴포넌트를 불러오려고 했다. /* 오류 발생 코드 */ import { HashRouter, Route } from 'react-router-dom'; import About from './routes/About'; function App() { return ( ); } about안에 문구가 들어있고, 해당 페이지를 불러오려고 했다. 그,런,데.. 오류가 발생되었다. 💎오류코드 A is only ever to be used as the child of element, never rendered directly. Please wrap your in a 💎오류 해결 ..

생활코딩의 2022개정판을 따라하며 정리했다. 더보기 https://www.youtube.com/watch?v=XQ-XqLVJBwg&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=3 리액트는 사용자 정의 태그를 만드는 기술이다. -생활코딩 0. 리액트 문서 확인 https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 새로운 React 앱 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 1. 리액트 프로젝트 생성 원하는 폴더 생성 후 해당 폴더에서 터미널 오픈 > npm create-react-app . 입력..