React 시작하기

 

 

먼저 npm install -g yarn을 설치한다

yarn이 안되면 npm도 상관없지만 yarn은 npm의 편리한 버전이라고 생각하면 된다

 

 

 

 

원하는 경로에 create-react-app 프로젝트명을 입력하면 자동으로 설치가 진행된다

 

설치되는 동안 VSC에 플러그인 설치하기

 

1. ESLint ( javascript 문법 체크)
2. Reactjs code snippets (Charalampos Karypidis)
3. Relative Path (상대 경로에 있는 파일 경로를 편하게 작성할 수 있는 도구)
4. Guides(들여쓰기 가이드라인)

 

 

 

 

설치 완료되면 cd hello 입력하여 생성한 프로젝트 파일로 경로를 옮긴 후

yarn start를 입력하여 서버를 실행시켜준다

 

 

 

 

리액트 첫 실행 시 브라우저에 나타나는 화면

 

 

 

 

생성한 프로젝트를 열어보면 Vue와 비슷하게 여러 가지 폴더와 파일이 존재하는데,

index.js는 vue의 main.js에 해당된다고 생각하면 된다

 

 

 

 

괄호() 안의 작성법은 jsx로 javascript+xml을 합친 것이다

리액트는 함수기반, 클래스 기반으로 둘 다 작성이 가능하며

자바스크립트 입장에서 class는 예약어이기 때문에 속성에 class라고 작성하면 안 된다

class 사용하고 싶으면 className이라고 작성!

 

 

 

 

App.js의 render 안의 return은 화면에 출력되는 부분이다

여기서 h1태그로 hello react! 를 작성하면

 

 

 

 

리액트 서버에 입력한 데로 출력이 된다

 

 

 

이렇게 브라우저로 바로 출력되는 이 부분은 Vue의 템플릿 공간 느낌이다

 

Vue에선 모델을 관리하는 data가 존재하며

리액트의 data 관리는 state이다

 

 

바깥은 jsx, 안쪽은 Javascript영역!

 

 

 

Vue와 React의 스타일 지정 방법 비교

vue는 v-bind를 통해 인라인 css를 지정해주었고, react는 {}를 통해서 인라인 css를 지정해주었다

 

 

 

 

 

React에서 state 값을 변경하려면 setState로 바꿔야 UI가 자동 업데이트된다

this.setState({});

 

 

 

원래 p 요소에서 '내 이름은 김구라'가 표시되어있지만,

버튼을 클릭하는 순간 setState로 인해 myName의 데이터 값이 원숭이로 변한다

 

 

 

 

React의 클래스에서 추가 한 함수에서 this. 을 사용하려면 꼭 화살표 함수를 이용해서 만들어야 한다

화살표 함수를 사용하지 않으면 복잡하게 처리해야 하기 때문에 처음부터 화살표 함수를 이용하는 것이 좋다