React란
React는 페이스북에서 만든 웹프레임워크로, vue나 Angular 많이 비교되기도 한다.프런트단에서 많이 쓰인다.
장점
1.상호작용이 많은 UI:선언형
2.컴포넌트기반-효율적인 컴포넌트 갱신 및 렌더링
3.컴포넌트 기반-스스로 상태 관리하는 컴포넌트
4.DOM과 별개로 상태 관리(즉,DOM이 아닌 컴포넌트와 가상DOM 사용)
5.앱 안 데이터 손쉽게 전달(폭포수처럼)
*DOM vs. 컴포넌트
DOM은 문서구조 자체이고 컴포넌트는 이를 추상화한 모듈화시킨것이다.
DOM의 문제:모든 하위의 태그 거쳐야하므로 렌더링이 느리다.
리액트: 이전과 비교해 바뀐 부분만 새로 렌더링한다
컴포넌트들의 state를 이전과 비교해 바뀐부분을 props로 바꾼다,새로고침도 안해도 된다!
React활용 순서랄까
1.전체 컴포넌트의 구조를 먼저 기획한다.
2.각 컴포넌트가 가지는 상태와 변화를 생각한다.
3.컴포넌트를 만단다.
4.컴포넌트에 HTML비슷한것(JSX)을 통해 구조를 만든다.
5.css를 통해 꾸민다.
6.여러 React의 함수를 통해 기능을 추가한다.
React시작하기
npm으로 설치하기에 앞서 npm의 특징을 간단하게 살펴보면
1.개별 프로젝트 폴더에 따로 설치 가능
2.전체적으로 사용하도록 설치도 가능(-g,global)
3.사용은 주로 npm으로 시작
4.npx:따로 모듈 설치 없이 사용할 수 있게 해주는 툴
npm으로 모듈설치는 node.js사용해 express개발할때도 해보았는데 npx를 사용해보자 여기서는
$npx create-react-app my-app
$cd my-app
$npm start
작업환경에서 vs code를 실행해 터미널에 다음과 같이 명령하면 결과적으로 react,react-dom,react-scripts...가 설치되었다.
(더 이상 create-react-app을 전역적으로 설치하는것은 지원되지 않는다.나는 이전에 설치되어 있어 에러가 생겨 지우고 다시 실행해야했다.)
그럼 생긴 myapp폴더 안은 node_modules폴더,public폴더,src폴더, package.json, README,.gitignore가 생긴다. 먼저 npm start를 했을 때 나오는 화면은 index.html이다. 그리고 이 파일의 css와js를 담당하는 index.js와 index.css파일들. 모든 컴포넌트들은 각자 만들어져 index.js에서 한꺼번에 렌더링되어 index.html에 렌더링된다. 사실 index.html을 보면 있는 <body>태그 안에는 <div id="root">외에는 아무것도 없다.
index.js에서
ReactDOM.render(<App />, document.getElementById('root'));
를 통해 root에 <App/>을 뿌려주기 때문이다.
<App/>대신에 다른 태그 '<h1>안녕하십니까</h1>'이런식으로 바꿔보면 index.html에 이게 대신 나타난다.
그럼 <App/>은 뭐나면
import App from './App';
를 통해서 App.js의 내용을 App이라는 이름으로 가져온 것이다.
App.js는 내용을 정의한 후에 export한 것이고!
export default App;
고럼 이제 직접 작성해서 내용을 바꿔보자
JSX로 작성하기
App.js과 같은 파일에는 JSX를 사용해 컴포넌트를 만든다. JSX는 JavaSciript XML로 JavaScript에서 쓰는 HTML과 비슷한것이다. 특징은 다음과 같다.
-태그 이름은 기존 HTML과 거의 유사하다
-attribute나 css는 낙타방식이다(className,textAlign)
-JS코드를 사용하고 싶으면 {}을 이용한다.(nodejs에선${},python에선{%%})
히나씩 살펴보자.
1.JSX에서 HTML태그와 똑같이 사용한다.
똑같이 사용한다
2.JSX에서 style통해 css조절
3.JSX에서 className을 통해 css조절->App.css에서 임포트 통해
오늘 내가 도움받은 곳 ;)
npx create-react-app 에서 A template was not provided. This is likely because you’re using an outdated version of create-react-app
Problem CRA 공식 문서대로 npx create-react-app my-app 명령어를 입력했는데 A template was not provided. This is likely because you’re using an outdated version of create-react-app. 에러가 나면서 빈 react app이 생성되었다…
milooy.wordpress.com
'[React]' 카테고리의 다른 글
| Hook (0) | 2020.03.25 |
|---|---|
| React Life Cycle (0) | 2020.03.24 |
| Event, Event Handling (0) | 2020.03.23 |
| Props&State (0) | 2020.03.20 |
| JavaScript 문법2 ES6,ES7 (0) | 2020.03.18 |