React | 처음 시작하는 리엑트

1. 공식 문서를 확인해라. (from react)

• React의 최신정보 확인.

2. 설치방법

• node.js를 한다. (node.js를 설치하면, 자동으로 npm도 설치가 된다.)
• 터미널에서 "npm -v" 명령어를 통해서 npm의 설치여부를 확인한다.
• 설치를 확인 했으면, "sudo npm install -g create-react-app" 명령어를 통해서 설치를 계속 진행한다.
• "create-react-app -V" 명령어를 통해서 리엑트 설치여부를 확인한다.
• 개발환경을 설정할 디렉토리를 만든다. "mkdir directory(폴더명)"
• cd directory(폴더명) 명령어를 통해서 개발환경을 설정할 디렉토리로 진입한다.
• "create-react-app ." 명령어를 통해서 리엑트 개발환경을 설치하면 된다. 현기서 .(닷)은 현재 디렉토리를 의미한다.
• 비주얼 스튜디오 코드를(원하는 에디터) 연다.
• cmd + j 를 통해서 비주얼 스튜디오 코드에서 터미널을 연다.
• "npm run start" 명령어를 실행하면, 리엑트가 구동되는 브라우저창이 열린다.
• 실행을 끄고 싶으며, "ctrl + c" 명령어를 실행하면, 브라우저창이 꺼진다.

3. 리엑트 설정하기

- 리엑트 설정을 마친 폴더를 에디터를 통해서 열어준다. 
- function type에서 class type 으로 설정 변경 방법 "App.js"에서 변경을 하면 된다. 
  ```
  import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';

  class App extends Component {
      render () {
        return (
        <div className="App">
          <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        </div>
      );
    }
  }

  export default App;
  ```
- "npm run build" 명령어를 통해서 public과 유사한 폴더를 생성할 수 있는데, 배포하기 전에 테스트배드와 같은 곳이라고 생각하면 될 것 같다. 일반적으로 이쪽에서 작업

4. component 만드는 방법

- component를 만들때는 반드시 하나의 최상위 태그를 필요로 한다. 
 ```
 class "태그" extends Component {
   render() P
     return (
      "내용"
     );
   }
 }
 ```
- { } 중괄호로 시작한다. 
- this 객체에 접근한다. 
- 자바스크립트에서 Attribute에 해당하는 Props에 접근한다. 
 ```
 {this.props.title}
 ```

5. 브라우저상에서 "component" 를 보려면...

 - react Developer Tool을 크롭 앱스토어에서 다운로드. 
 - console 창에 들어가면, 맨 끝에 Components를 확인.
 

6. 리엑트 적용 방법

- 리엑트를 이해하는 중요한 키포인트는 함수의 폴더화이다. 각각의 함수를 각각의 페이지에 만들어서 리엑트에서는 import해서 웹페이지에 export한다고 생각하면 쉬울 것 같다. 먼져 따로 쓰고 싶은 함수를 파일로 만든다. (ex. TOC.js)
  ```
  </*TOC.js>
  import React, { component } from 'react' ;
  
  class TOC extends Component {
    render () {
      return (
      )      
    }
  }
  
  export default TOC;
  ```
  ```
  </*TOC를 불러오는 App.js>
  import TOC from "./components/TOC" //TOC 뒤에 붙는js는 생략
  
  ```
  

7. state에 대한 이해 (1)

 - 한번에 이해하기 어려운 개념이다. 혹시 제 글을 읽는 분이 계신다면, 제가 이해한 state에 대한 개념은 80%이상 틀린 것이기 때문에, 참고하지 않길 바랍니다. 
 - 일단 내가 이해한 것을 그대로 설명을 하자면,  리엑트에서 Component를 만드는 것은 가독성과 재활용성의 중요함 때문이다. 즉, 중복을 피하겠다는거지... 그렇다면, 기존에 자바스크립트에서 쭉~ 나열했던 코드들을 각각 폴더화 시켜서 그것들을 불러올 때, 내가 찾고자 하는 폴더, 즉 Component를 빨리 찾을 수 있고, 문제가 생겼을 때 즉각적으로 고칠 수가 있다는것이지... 그러면, 과연 리엑트를 개발한 사람들이 이렇게 만든 Component를 적용할 때, 그냥 쓰도록 냅뒀을까?? 무슨 말이냐면, 폴더를 만들었어, 그러면 그것을 적용할 도화지가 필요해!! 그게, App.js야 	App.js에서 render 하고 return을 하는데, 거기다가 만든 Component를 적용하고 HTML처럼 쓴단말이지 예를 들어서 아래 코드처럼 말이지..
    ```
     <subject title="React" sub="I hate you"></subject>
    ```
    근데, 간단하게 쓸 때는 위에 처럼 쓰면 되지만, 길면 어쩌냐 이거지 그리고 비슷한걸 만들어야 하는 상황이 생기면,  복사 붙여넣기를 여러번 해야 할 텐데... 그러다가 에러 발생하고... 이걸 리엑트 개발자들이 가만히 나뒀겠냐 이거야!!! 절대 아니지!!!! 작은 Component를 또 만든거지!!!
    음... 저는 이렇게 이해했습니다. 제 생각이 맞다면... 누가 댓글좀 달아주세요. ㅜㅜ 아니면, 종아리를 강하게 때려주세요. 네가 이해한 방식은 아니야!! 라고.

8. webpack

• 코드들을 의존하는 순서대로 잘 합쳐서 하나 또는 여러개의 결과물을 만들어낸다??
• import와 export에 대한 웹프로젝트를 만들 때, 전체적으로 관리해줄 수 있는 도구??

9. Babel

• 자바스크립트 변환 도구??

10. 리액트 추가적인 설명(about JSX)

- 태그는 꼭 닫혀야 한다. HTML에서 input이나 br태그를 사용할 때, 안닫는 경우도 있었지만 리액트에서는 꼭 닫아야 합니다. 
- 셀프 클로징 태그를 사용해서 닫을 수도 있다. 아래 "/>"	부분이 셀프로 클로징 한 것이다. 
  ```
   <input type="text" />
  ```
- 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. 
  ```
   <div></div>  //이렇게 두개 이상의 엘리먼트가 있을 경우, 하나로 감싸줘야 한다. 
   <div></div>
  
  <div>
    <div></div>  // 위의 코드를 <div></div>로 감싸줘야만 리액트에서 작동된다. 
    <div></div>
  </div>
  ```
 - 하지만 위의 코드를 활용하게 되면, 항상 감싸는 태그를 만들어야 하는 불편함이 생길 수 있다. 
 이를 해결하기 위해서 등장한 것이  "Fragment" 이다. div를 없애주면, 웹페이지 상에서 불필요한 div가 사라지게 됩니다. 
 ```
  import React, { Component, Fragment } from ' react' ;
  
  class App extends Component {
    render() {
      return (
        <Fragment>
          <div>Hello</div>
          <div>Bye</div>
        </Fragment>
        ... 이하 생략 ...
   ```
 

11. JSX 안에서 자바스크립트 값 사용하기

  - 3항 연산자 : true ? 맞다! : 틀리다!

12. CSS 적용하기

1) style은 객체형태로 작성되어야 한다. 
2) 적용하고 싶은 color, fontSize 등은 carmelcase 방식으로 작성되어야 한다. 
3) return을 할 때에는 변수에 { }	를 넣어야 한다. 
4) 입력하고자 하는 값들은 스트링 형태로 입력을 해야한다. 'black', '36px' 등
 ```
  import React, { Component } from 'react';
  
  class App extends Component {
    render() {
      const sytle = {
        backgroundColor: 'black',
        padding: '16px',
        color: 'white',
        fontSize: '36px'
      };
      return (
      	<div style={style}>
        	안녕하세요!
         </div>
       );
     }
   }
 
 export default App;
 ```
 5) html 에서 사용하던 class는 className으로 사용한다. 
 

13. 주석 사용하기

 - 자바스크립트 처럼 /* */ 이렇게 사용하면 되지만, { } 중괄호를 씌워야 한다.
 - // 기존에 사용하던 슬러시 방식으로 사용해도 된다. 

14. Props 값 고정하기

  ```
   Myname.defaultPage = { name: "KIM" };// MyName 이라는 Component에 Props 값을 고정
   static defaultProps = { name: "기본이름" };
  ```