React (3) 썸네일형 리스트형 React Router란? 쉽게 말해서 어떤 페이지로 연결 할 건지를 결정하는 것. 대부분의 웹 사이트들은 여러가지 페이지로 나뉘어져 있다. 이 다양한 페이지들을 이동할 수 있게 해주는 것이 Router. React는 싱글페이지를 쉽게 만들 수 있는 라이브러리다. 싱글페이지란? 하나의 url로 그 안에서 다른 링크를 클릭했을때 새로운 페이지가 열리지 않고 부분적인 내용만 업데이트 되는것. 이런 싱글페이지의 문제점은 사용자가 원하는 부분을 북마크 할 수 없고 브라우저상에서 뒤로가기 앞으로가기가 추가 되지 않는다. 이런것을 보완하기 위해서 싱글페이지를 유지하면서 url을 붙일 수 있게 해주는 것이 리액트 라우터이다. 리액트 사용 환경 구축 -node.js 설치 하기 (npm을 사용하기 때문) -cmd창을 활용 (cmder추가 설치해도 됨) -페이스북에서 만든 yarn이 보안성이나 성능이 좀 더 좋다. npm대신 사용가능. 그렇다고 해서 node.js를 설치 안하면 안됨. -npm install --global yarn 명령어로 yarn 설치. -cmd창에 작업할 파일경로로 들어가고 -> cd \파일이름\하위파일이름 yarn start를 하면 브라우저에 리액트가 실행된다. -실행하면서 cmd창에 명령어를 입력하고 싶다면 ctrl+c로 종료해야 하거나, 다른 cmd창을 열어서 실행하면 됨. **각자의 버전을 확인할 수 있는 명령어 git -v node -v npm -v yarn -v 크롬 웹 스토어에서 React Developer Tools을.. 리액트 개념 정리 리액트란? -유저 인터페이스를 만들 수 있게 도와주는 라이브러리. -사용자에게 ui를 보여주고 이벤트를 처리함. -컴포넌트로 이루어진 라이브러리. 컴포넌트? -컴포넌트는 한 가지의 기능을 수행하는 UI의 단위. -서로 독립적이고, 고립되어져 있으며 재사용이 가능함. -제일 상위에 있는 컴포넌트를 Root라고 함. -컴포넌트 안에 state가 변경되면 리액트에서 자동으로 render함수까지 업데이트 된다. -가상의 리액트 돔트리에서 업데이트를 하기때문에 성능에 문제가 생기지 않는다. *state - 데이터를 가지고 있는 것. *render- 사용자에게 어떻게 보여질지 정의하는 것. **리액트 공식 사이트 Docs: https://reactjs.org/docs/getting-started.html Getti.. 이전 1 다음
