[생활코딩] 1# 리액트 공부

개발환경 구축 하기

생활코딩 3

https://ko.reactjs.org/docs/getting-started.html

Create a New React App

툴체인 이라는게 있는데

툴체인이란 웹개발을 할때 필요한 것들을 모아놓은 것들

Create a New React App

https://github.com/facebook/create-react-app

npm install -g create-react-app@2.1.8

react 를 설치해 준다

여기서 npx 는 1회용으로 다운로드 한뒤에 실행하고 삭제하는 명령어이다.

create-react-app [폴더명]

를 쳤을 때 project 가 나오면 제대로 설치가 된것이다.

이 명령어는 react 환경을 구축해 주는 명령어다

이렇게 기본으로 만들어 지는 소스를 실행시킬떄는

npm run start

를 해주면 된다

폴더구조

public

index.html 이 있는 디렉토리다

웹상에서 볼수 있는 화면은 index.html 에 있는 화면이다.

여기에는 id="root" 라고 있는데

여기서 해당 컴포넌트에 들어가는 소스의 내용들은 src 의

index.js 파일에 있다.

src

ReactDOM.render(<App />, document.getElementById('root'));

이것을 기반으로 만들어 지는거다.

여기에서의 App 이 react 로 만들어진 컴포넌트이다.

import App from './App';

상단의 소스를 넣어서 컴포넌트의 내용을 가지고 올수있게 된다.

이 내용은 App.js 파일 이다.

따라서 해당 소스를 수정을 하게 되면 내용이 바뀌게 된다.

CSS 수정하기

index.js 에 import './index.css'; 라는 부분이 있다.

이부분을 수정하면 index.js 내의 css 를 수정할수 있다.

또한, App.js 의 css 를 수정을 할시에는 import './App.css'; 라고 되어있는 부분을 수정해 주면 App 컴포넌트가 로드되었을때 디자인을 그안에 넣는다.

App

빌드할때는 npm run build 해준다

그러면 build 라는 폴더가 생기며 minified 해준다.

즉 실제 서비스 할때는 build 안의 파일을 실행을 시키면된다.

즉 root 를 build 로 해주면딘다.

npx serve -s build 명령어로 서버를 만들어 준다.

이때 -s 의 뜻은 build 를 root 디렉토리로 잡아준다라는 뜻이다.

그러면

│ - Local: http://localhost:5000 │
│ - On Your Network: http://10.120.162.134:5000 |

이런 내용이 나오는데 내가 접속할수 있는 link 이다.

컴포넌트 만들기

class App extends Component { //Component 를 상속함
  render(){//그중 render 을 사용한다. * 반드시 필요
  return (
    <div className="App">
      Hello,React!!
    </div>
  );
  }
}

class Subject extends Component{
  render(){
    return (
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>
    );
  }
}

원래는 function 이 앞에 붙지만 class 에서는 생략을 한다.

여기서 중요한점은 하나의 최상위 태그만을 써야한다.

 <Subject></Subject>    

태그를 써서 만들어 놓은 컨포넌트를 쓸수 있다.

react 는 jsx 를 쓴다.

이것을 알아들을수 있게 컨버팅 시켜서 만드는 것이다.

컴포넌트에 속성 추가하기

    <Subject title="WEB" sub="world wide web!"></Subject>

위와 같이 속성을 추가해주려면 this.props.title 과 같이 써주면 된다.

자바스크립트 에서는 어트리뷰트 라고 한다.

react 는 jsx 로 되어있을을 기억하자

이것을 해당 Class 에서는

{this.props.desc}

와 같이 사용을 해서 컴포넌트를 동적으로 변경을 해준다