#1 시작!
리액트란?
- 리액트는 자바스크립트 기반의 프로그램으로 2013년에 페이스북 측에서 처음으로 릴리즈되었다.
작업환경 준비 )
코드 에디터가 있다는 가정하에, 우선 Node.js에서 LTS 버전 파일을 다운로드한다.
코드 에디터로 대중적인 Visual Studio Code (비주얼 스튜디오)를 사용할 것 이다.
그리고 에디터를 키고 터미널을 클릭해서 다음 명령어를 실행하면된다.
$ npx create-react-app begin-react
begin-react는 디렉토리 이름이라 본인이 희망하는 이름으로 지정해도 된다.
그리고 다음 명령어르 실행하면된다.
$ cd begin-react
$ npm startnpm start를 입력하면, 브라우저에 http://localhost:3000/ 가 열리면서 처음 리액트 페이지가 생성된다.
첫 번째 리액트 컴포넌트
src 디렉토리에 Hello.js라는 파일을 생성한다.
다음으로 밑에 있는 코드를 작성한다.
Hello.js
import React from "react";
function Hello() {
return <div>안녕하세요</div>
}
export default Hello;중요한 점은
import React from 'react';위의 있는 코드를 꼭 작성해야 리액트 컴포넌트 사용이 가능하다.
또한...
export default Hello;마지막에 위의 코드를 작성해야 해당 컴포넌트를 다른 파일로 내보낼 수 있다.
리액트 컴포넌트는 함수형태뿐만 아니라 class 형태로도 작성이 가능하다.
예 ) class형태 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello</h1>;
}
}Hello 컴포넌트를 App.js에 불러오겠다.
App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}
export default App;결과 :
참고로!
컴포넌트를 작성할 때는 무조건 대문자로 시작해야한다.
소문자는 태그로 인식한다.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
불필요한 코드들은 지워버렸다.
위의 코드에서 ReactDOM.render은 브라우저에 있는 DOM 내부에 리액트 컴포넌트를 렌더링한다는 뜻이다.
그리고 알아야 할 점은
ReactDOM.render(자식, 부모)
첫 번째 인자로는 감쌀 자식 태그를 뜻하며, 두 번째 인자는 첫 번째 태그를 감쌀 부모 태그이다.
그리고 위에서 id가 root인 태그를 선택했는데,
public 디렉토리안에 index.html안에
를 뜻한다.
그러면 JSX란?
- 자바스크립트의 확장 문법 (JavaScript + XML)
쉽게 말하면 HTML 문법을 리액트에서도 쓸 수 있게끔 해준다.
예 )
참고 : 벨로퍼트와 함께하는 모던 리액트
느낀점 :
- 아직까지 리액트를 공부하고 있지만 잘 모르는 것도 많고 헷갈리는 부분이 있다.
- 새로운 마음가짐으로 공부해서 완전히 내것으로 만들고싶다.
다들 화이팅!
