개발/React.js 썸네일형 리스트형 [React.js]Deploy 간단하게 영화리스트 앱을 완성한 후 githut에 배포해보았다. 먼저 github에 배포할 수 있도록 해주는 API를 설치한다. 명령어 : npm i gh-pages 다만 이 경우에 원격저장소와 연결을 해주어야 함. (git remote -v 로 연결된 원격저장소 확인 가능) 이후 package.json 파일에서 "homepage": "https://{github아이디}.github.io/{원격저장소명}" 를 추가한 후 아래의 명렁어도 scripts 내에 추가해 준다. 이후 npm run deploy 로 빌드와 동시에 배포가 가능! 더보기 [React.js] State props와 더불어 리액트의 가장 중요한 두 개념인 state와 effect에 대해 공부하였다. 사실 props보다 state를 먼저 배웠지만 포스팅이 늦어졌다. React.useState() 를 통해 생성이 가능하며 생성하는 변수에 첫번째 인자로는 사용할 값을, 두번째 인자로는 상태를 변경해줄 수 있는 함수가 전달된다. import { useState } from "react"; 더보기 [React.js]props Props의 개념에 대해 공부했다. 가장 상위 컴포넌트가 되는 App 컴포넌트 내에 자식 컴포넌트들이 존재하게 되는데, 만약 자식 컴포넌트가 같은 속성들을 가지고 단지 이름만 다르다거나.. 하는 경우라면 같은 코드를 중복 작성하여 컴포넌트를 만들기보다는 props를 활용해 하나의 컴포넌트에 다른 인자를 전달함으로서 컴포넌트를 구성해줄 수 있다. props에는 값뿐만 아니라 함수도 전달이 가능하다. 위와 같이 text 라는 props를 받는 Btn 컴포넌트를 하나만 만들어주고 App 컴포넌트에서 Btn에 text라는 이름을 가진 props에 값을 담아 전달해준다. 보기와 같이 같은 Btn 컴포넌트임에도 다른 결과가 도출된다. ps. propTypes 를 통해 전달되는 props의 타입을 지정하고 잘못 전달.. 더보기 [React.js]바닐라JS >> React.js(1) 예전에 생활코딩 리액트 수업을 간단히 들었지만, 금세 잊어버렸었다. 리액트에 대해 제대로 배우고 싶은 생각에 노마드코더 리액트 기초수업을 진행하면서 같은 UI와 기능을 구현하는 데에 있어서 자바스크립트와 리액트의 차이를 알게 되었다. JS에서는 변수와 함수를 생성하고, html의 요소를 가져온 후, addEventListener를 통해 "click"과 같은 이벤트를 부여한 뒤 웹페이지를 동적으로 제어하던 순차적인 방식이었는데, 리액트에서는 새로운 방식으로 접근한다. 페이지의 생성과 제어 모두를 script에서 구현하고, React.useState()를 통해 변수의 생성과 동시에 생성한 변수의 변화를 감지하는 함수를 동시에 내포한다. 이벤트를 다루는데에 있어서도 단순히 rendering 할 html 태그 .. 더보기 이전 1 다음
