React JS - 1일차

필요 셋팅

• node js

• npm

• npm -> npm install npx -g 를 통해 설치

• visual studio code

• git -> git remote add origin my-github-repository url

• create-react-app
  -> 리액트 작업 환경 구축
  -> npx create-react-app my-app 이용하여 리액트 작업 폴더 생성
  ( 여기에 기본적인 리액트 작업환경이 구축되어 있다. )

• npm start 를 통해 앱 실행
  -> 두 개의 URL을 얻을 수 있다.
  1) local => http://localhost:3000/
  2) On Your Network => http://123.123.123:3000/
  ( 같은 wifi 네트워크에 접속해 있는 기기에서 테스트 해볼 수 있다. )
  

리액트란

• html의 구성요소를 Javascript를 통해 삽입해준다.

• html에 삽입되는 요소들은 Javascript의 Class 형태를 지닌 - Component 형태로 삽입된다.

• 이러한 Component 들은 재사용성이 높은 요소이며, html의 요소를 표 현할 수 있는 하나의 블록이라고 생각하면 될거 같다.

function App() {
  return (
    <div>
      <h1>Hello!!!</h1>      
    </div>
  );
}

• 이러한 Component는 함수의 형태를 가지고 있으며, return 값으로 html태그에 삽입할 요소들을 반환하므로, return 안에 html에 삽입하고자 하는 구성요소들을 입력한다.
  ( ! 이때 컴포넌트 이름의 맨 앞글자는 대문자로 한다.)

• html의 태그의 id 값을 참조하여, 해당 태그안에 React Component로 선언한 App을 Render 한다.
  -> 하나의 태그안에 넣을 컴포넌트는 한개만 가능하다.
  -> 여러개의 컴포넌트를 넣고 싶으면, 다른 컴포넌트 안에 children Component로 넣어 삽입하자
  -> ReactDom.render() 를 두번 하면, 두개의 컴포넌트를 입력 할 수 있지 않을까 하여, 시도해 보았는데, 결과는 맨 마지막 줄의 Component만 렌더링 되었다...

ReactDom.render(<App />, document.getElementById("root"))

리액트 이거 좋은데?

아직 극초반부를 배웠지만, 지금까지 이해한 리액트란 html의 구성요소를 Javascript 단에서 DB와 연동하여 블록화하고, 이것이 html 페이지의 특정 이벤트가 발생하면 그때 렌더링되어 페이지를 더 동적이고 빠르게 작동하게끔 해주는 기술인것 같다. 처음부터 모든 html의 요소들을 렌더링 하지 않고, 필요시에만 렌더링 하여 보여주므로, 빠르고 효율적인 동적페이지 작성에 큰 도움이 되는 기술인것 같다.