본문 바로가기

분류 전체보기

 (108)
Prop-types prop-types는 내가 전달받은 props가 내가 원하는 props인지 확인해주는 것.(실수 방지) npm i prop-types
Map object list에서 정보를 가져오는데, 반복적인 일에는 Map 함수를 이용해 Dynamic Component Generation. map 함수는 원하는 함수를 리스트의 모든 요소에 적용한다. 이때 react는 멍청하기 때문에 각각에 id를 붙이고, property에도 key:id 를 넣어주면 좋다.
Props 컴포넌트를 호출할 때 property들을 넣어줄 수 있는데, 이건 그 함수의 인자로 쓰인다. 아래와 같이 사용할 컴포넌트의 이름을 적고, 뒤에 property들을 차례로 적는다. 컴포넌트 함수에서는 인자들을 하나씩 적을 필요 없이 props만 적어도 괜찮다. 이때 인자로 {number}이라고만 써도 함수가 이를 이해한다.
Component Component는 HTML을 반환하는 함수 함수를 컴포넌트로 사용하기 위해서는 이렇게 표현한다. : 컴포넌트를 사용해서 HTML처럼 작성할 때 react가 사용된다. javascript와 HTML 사이의 이러한 조합을 jsx라고 부른다. jsx는 javascript 안의 HTML이라고 생각하면 된다. jsx는 react에 특화된 거의 유일한 개념이다. 그 외에 react에서 쓰이는 개념들은 모두 javascript와 일맥상통 유의해야 할 점은, react application은 한 번에 하나의 컴포넌트만 렌더링 할 수 있다는 점 App 컴포넌트 안에 다른 컴포넌트를 넣어서 사용.
React src에서 app.js와 index.js를 남기고 모두 지운다. app.js와 index.js도 아래 내용만 남겨놓고 내용을 지운다. public/index.html에서 root를 보면 아무것도 없는데, 브라우저에서 검사 창을 띄워보면 root 사이에 뭔가 있다. 이게 React가 작동하는 방식이다. function App()에 내용을 채워넣으면 root 사이에 들어간다. React는 처음 페이지를 불러올 때 빈 HTML을 띄우고, 그 다음에 내용을 밀어넣는다.
Create React App Create React App: 한 번의 명령으로 React Web App을 셋업해준다. npx create-react-app react-js-movie package.json에서 scripts의 test, eject는 지운다. readme도 지우고 간단하게 내용입력 터미널에 npm start을 입력하면 바로 서버가 열린다! 깃헙과 연결하자 git init github에서 새로운 repository를 만들고, url을 복사 git remote add origin http://github.com/wonjongRyu/react-js-movie git add . git commit -m "Setup is Done" git push origin master 깃헙 레포 새로고침 해보면 반영되어 있다.
Why ReactJS 요즘은 거의 모든 회사들이 이걸 사용함 자바스크립트와 유사함
설치 NodeJs 설치(10,12 버전 상관 X) NodeJs를 설치하면 NPM이 자동으로 설치된다. git 설치 추가로 NPX 설치 npm install npx -g

티스토리툴바