728x90 반응형 React30 [React Hook] useState hooks는 react의 state machine에 연결하는 기본적인 방법이다. hook의 아주 기본이라고 할 수 있는 useState로 카운터를 만들어봤다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function App() { const [item, setItem] = useState(1) const increaseItem = () => setItem(item + 1) const decreaseItem = () => setItem(item - 1) return ( Hello {item} Increase Decrease ) } Colored by Color Scripter cs 중요한점이 있다면 item은 무조건 setItem이라는 모듈러를 통해서만 값을 수정할 수 있다! 2022. 7. 3. [React] 깃허브에 배포를 합시다! 우선 하기 전에 깃허브에 레포지토리 만들고 git init git commit -m "first commit" git remote add 머시기 같이 레포지토리 처음 만들면 setup하라고 주는 명령어 입력하면 된다. 그리고 npm i gh-pages 명령어 입력한다. npm run build pacakge.json에 scripts를 보면 build라는 script가 있을 것이다! 이걸 실행하면 우리 웹사이트인 production ready code가 실행되며 코드가 압축되고 모든게 최적화 된다. 터미널에 npm run build를 입력한다. 그러면 build 폴더가 생긴다. 여기에 압축된것들이 들어가는 것이다. package.json으로 돌아가서 마지막줄에 "homepage:"https://깃허브 us.. 2022. 5. 6. [React] Movie App 만들기! (3) - 다이나믹 URL 만들기 동적 URL 만들기 리액트 라우터는 동적(다이나믹) URL을 지원한다! 동적이라는 것은 URL에 변수를 넣을 수 있다는 것이다! 변수를 넣어주기 위해서는 유저가 movie로 가서 id를 입력하면 Detail을 보여주게 해보겠다. App.js 콜론(:)과 함께 작성된 path는 params에서 변수로 읽어 들이게 된다 https://velog.io/@hwang-eunji/React-Route-%EA%B8%B0%EB%B3%B8%EC%84%A4%EC%A0%95 React Router 기본설정 & 유동라우터 먼저 React 프로젝트로 이동하고 npm install react-router-dom --save 을 통해 라우트를 설치하자. 마지막 --save는 package.json에 패키지를 자동으로 추가하기 위한.. 2022. 5. 6. [React] Movie App 만들기(2) - Router을 사용해보자! React router을 사용해 화면을 넘기는 기능을 추가해볼 것이다. 컴포넌트를 이용해 코드 정리 App컴포넌트 리턴값에 엘리먼트들이 너무 많아서 컴포넌트를 하나 만들어주려한다. 컴포넌트는 새로운 파일에 만들면 되는데 Movie.js라는 새로운 파일을 만들었다. 반드시 Movie컴포넌트 넘겨줄때 key값을 넣어줘야한다! key에는 movie.id ./components/movie.js movie 컴포넌트는 리턴함으로써 사실상 UI 에 띄어주는 역할을 수행한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function Movie({medium_cover_image,title,summary,genres}){ return ( {title} {sum.. 2022. 5. 6. 이전 1 2 3 4 ··· 8 다음 728x90 반응형
