react.js4 [React] 클론코딩 react.js로 영화 웹사이트 만들기 여태까지 배웠던 React 이론+ react의 router 개념을 공부한후(이부분은 아직 잘 이해못했음) 영화 웹사이트를 만드는 클론코딩을 해보았다. react-router-dom 공식문서 참고 https://reactrouter.com/docs/en/v6/routers/router React Router | Router Declarative routing for React apps at any scale reactrouter.com 이번에는 단순하게 App.js 와 index.js만 가지고 만드는것이 아니고, 우선 npm(node package module)을 이용해서 react-router-dom도 설치했다. App.js 부분을 살펴보면, import { BrowserRouter as Router, .. FE/React 2022. 7. 28. [React] create-react-app(cra)로 개발환경 구축하기 create-react-app은 개발 환경을 쉽고 간단하게 해주는 것이다. cra를 사용하면 복잡한 설정없이 한번에 React 개발 환경을 구성하고 이용할 수 있다. 우선 node.js를 설치해주어야한다. 나는 이미 설치가 되어있으므로 터미널에서 확인해보면, v16.16.0이 깔려 있는것을 볼 수 있다. node.js를 설치 한후에는, 터미널에 npx create-react-app (폴더명)으로 생성할 수 있다. 이렇게 치게되면 이것저것 설치가 되기 시작할텐데, 다 설치될 때까지 기다려 주도록 한다. 설치가 다 끝나고, vscode로 열어서 package.json를 확인해보니 scripts안에 우리가 필요한 react-scripts이 설치되어 있는것을 볼 수 있다. index.html 을 보면, 앞에서 .. FE/React 2022. 7. 24. [React] STATE개념 이해 React에서 중요한 개념인 State에 대해서 공부했다. https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org 윗링크를 참고했다. setState는 어떤 일을 하나요? setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. 이말 자체가 엄청 중요하다 밑에 코드를 보면 알겠지만,useState()를 사용하지 않으면 하나의 이벤트처리등을 할때마다 바뀌는 값들을 ReactDom.render와 같은 형식으로 리렌더링을 해줘야하기 때문이다. 그리고 또, 자바스크립트내에.. FE/React 2022. 7. 23. [React] React 기초 자바스크립트를 공부한후에 react.js에 관심이 생겨서 한번 해보기로 했다. 근데 아직은 익숙하지 않아서그런가 생각보다 쉽지는 않았다. 이것저것 공부한 내용과 주석을 달아보았는데, 우선 처음에 react 와 react.dom을 import 해야한다. 이렇게 삽입을 해주어야 한다. 그후에 JSX를 적용하기전 react 문법들만 가지고 먼저 짜보았다. JSX란 ? https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 이것을 읽어보면 된다. JSX를 적용하기전 코드를 보면 와 같은 형식이 되는데, 기존 Javascript랑 비교해보면.. FE/React 2022. 7. 23. 이전 1 다음
