[Day 37] Mid Project Comment + React Tutorial

Mid Project

Comment

1. 통신 매우 중요하다!!
   • 서버 사용법에 대한 공부를 많이 해야한다. (Postman을 이용하자!)
2. 알고리즘
   • 서버에서 넘겨주는 데이터가 그리기에 좋은 데이터가 아닐 경우가 굉장히 많다. 데이터를 내가 그릴 때 잘 그리기 위해 원하는 형태로 가공을 할 수 있어야 한다. (filter, map, reduce 등등.. 많이 쓰인다.)
   • 생각보다 프론트에서 데이터 처리를 할일이 많다!!
3. 코드가 너무 길다 ㅠ…
   • 빌드 도구를 통해 모듈(Module) 관리를 하면 짧게 줄일 수 있다!!
4. 코드 구조가 복잡하다. (HTML / CSS / JS 왔다갔다…)
   • 하나의 기능에 대한 HTML/CSS/JS를 하나로 묶은 것을 컴포넌트(Component)라고 한다.
   • 각각의 기능을 하나의 컴포넌트로 만들어서 관리하자!
5. 코드 중복
   • 레이아웃, 로그인 관련 처리, 로딩 인디케이터 등등이 다 코드 중복
   • 이처럼 코드가 중복되면서 여러 부분에 걸쳐 적용되어야 하는 것을 횡단 관심사(cross-cutting concerns) 라고 한다.
   • 횡단 관심사에 대한 코드 중복을 해결하기 위해서는 고차 함수 를 적절히 활용해야 한다.

React

Tutorial

• 명령형 프로그래밍
  • 코드를 써 놓은 순서대로 기계가 명령을 수행한다.
  • 세부적인 컨트롤을 하기가 쉽지만, 결과물의 최종 구조물을 확인하기 어렵다. (코드를 다 읽고 해석해야한다.)
• 선언적 프로그래밍 (React는 선언적이다!)
  • HTML 같은 것들은 선언은 프로그래머가 하고 그리는건 HTML이 한다.
  • 코드가 생긴대로 결과물이 나온다. (코드가 결과물의 구조를 잘 반영하고 있다.)

React

• 선언적이다!

• 효율적이다!

  • 사람(개발자)에게 효율적인 방식으로 그리는 것처럼 보인다.
    • (변경사항 발생할 때마다 전체 화면을 새로 그리는 것 처럼 보인다.)

• 유연하다!

  • UI를 값(value)으로 다룰 수 있다.

• 용어

  • 뷰(view): 어떻게 그릴 것인지에 대한 ‘값’

  • render() 메소드 내부의 html 코드들은 html element가 아니다!!

    • html 코드 처럼 보이는 것들은 react element다.

    • react element는 ‘무엇을 그릴지에 대한 정보를 담고 있는 객체’ 이다.

    • render() 메소드는 (단 하나의) react element 를 반환한다.

      // render() 메소드에서는 이렇게 두개의 react element를 반환할 수 없다.
      render() {
          return (
          	<div></div>
              <div></div>
          )
      }
      

    • render() 메소드 안에서는 무조건!!! 화면 그리는 것과 관련된 일만 처리해줘야 한다.

    // 이러한 구조로 리액트 엘리먼트를 만드는 것을 'JSX 코드' 라고 부른다.
    class ShoppingList extends React.Component {
      render() {
        return (
          <div className="shopping-list">
            <h1>Shopping List for {this.props.name}</h1>	
            <!-- {this.props.name}는 값을 매핑하는 기능을 한다.-->
            <ul>
              <li>Instagram</li>
              <li>WhatsApp</li>
              <li>Oculus</li>
            </ul>
          </div>
        );
      }
    }
        
    // 사용 예제: <ShoppingList name="Mark" /> (이걸 React element 라고 한다.)
    

    // 위의 JSX 코드는 빌드 과정을 거치면 아래의 코드로 변경된다.
    return React.createElement('div', {className: 'shopping-list'},
      React.createElement('h1', /* ... h1 children ... */),
      React.createElement('ul', /* ... ul children ... */)
    );
    

• React 코딩 순서

  1. 화면을 그린다.
  2. 상태를 설계(초기화)해준다.
  3. 상태의 변화에 따라 화면을 그려준다.

Passing Data Through Props

• 컴포넌트 간에 데이터를 넘기기 위해서!

  • return하는 component의 element에 attribute를 지정하면 해당 component에 props 속성으로 생겨난다.

  • props는 부모로부터 데이터를 내려받는 통로

    class Board extends React.Component {
      renderSquare(i) {
        return <Square value={i} />;
      }
    

  • props을 속성을 통해 데이터를 받아올 수 있다. (부모 -> 자식 흐름으로 데이터가 흐른다.)

    class Square extends React.Component {
      render() {
        return (
          <button className="square">
            {this.props.value}
          </button>
        );
      }
    }
    

상호작용을 하는 컴포넌트 만들기

• render() 메소드 내부에서 리턴하는 리액트 엘리먼트에 상호작용(이벤트 붙이기)

  class Square extends React.Component {
    render() {
      return (
        <!-- onClick prop에 함수를 넘겨서 상호작용(이벤트)을 만들 수 있다.-->
        <button className="square" onClick={() => alert('click')}>
          {this.props.value}
        </button>
      );
    }
  }
  

상태를 저장해보자

• React 컴포넌트의 생성자에서 this.state 속성을 넣어주면, 이 컴포넌트는 상태를 갖게 된다.

  • 이 상태를 갖고 있는 컴포넌트만이 상태를 변경할 수 있다. (주의!)

• resct 컴포넌트의 생성자를 정의할 때에는 super(props) 를 통해 react 컴포넌트의 생성자를 호출하는 코드가 무조건 반드시 제일 위에 있어야 한다.

  class Square extends React.Component {
    constructor(props) {
      super(props);	// 무조건 생성자의 제일 위에 와야한다.
      this.state = {
        value: null,
      };
    }
  

• setState() 메소드 (중요!!)

  • 두 가지 역할을 한다.
    1. 상태를 저장한다.
    2. 상태 변화에 따라 화면을 갱신해야 한다는 것을 React에게 알려준다.
       • (상태가 변경될 때마다 컴포넌트의 render() 메소드를 실행한다.)
  • 하나의 메소드가 자동으로 두 가지 일을 해준다.
  • React 에서는 화면을 다시 그리고 싶다면 무조건 상태를 바꿔야 한다.
    • 화면만 다시 그리는 건 불가능 ㅠㅠ…
  • 컴포넌트 안에서 setState() 를 호출하면 해당 컴포넌트의 자식 컴포넌트까지 모두 새로 그려준다. (하위의 모든 render() 메소드를 호출한다.)

상태 끌어올리기! (Lifting State!)

• 상태를 하나로 종합해서 다른 일을 수행하려면 각각의 컴포넌트에 흩어져 있는 상태를 한 곳으로 모을 필요가 있을 때도 있다.
• 자식 컴포넌트의 상태를 부모 컴포넌트에서 가져오는 코드를 작성하는 경우는 없다!! (in React)
• 자식 컴포넌트의 상태를 부모 컴포넌트에 저장하는 방식으로 코드를 작성한다!
• 여러 자식 컴포넌트에 저장되어 있는 데이터를 읽어와야 할 때, 또는 자식 컴포넌트끼리 통신을 해야 할 필요가 있을 때는, 부모 컴포넌트에 상태를 두고 그 상태를 공유하는 방식으로 코딩한다.
  • 부모 컴포넌트에서는 prop을 통해 자식 컴포넌트에게 상태를 내려줄 수 있다.
  • ‘상태를 공유해야 하는 컴포넌트들의 가장 가까운 공동 조상에게 상태를 두는 것’이 원칙이다.
• 자식 컴포넌트에서 부모 컴포넌트의 상태를 바꾸기 위해서는
  • 부모 컴포넌트에서 상태를 바꿀 수 있는 함수를 만들어서 자식 컴포넌트에 내려보내주면, 자식 컴포넌트에서 간접적으로 부모 컴포넌트의 상태를 바꿀 수 있다.
• 자기 스스로 상태를 가지지 못하고 부모 컴포넌트의 상태 변화에 의해 자신의 상태가 바뀔 수 있는 컴포넌트를 ‘제어되는 컴포넌트’ 라고 한다.

함수형 컴포넌트

• 컴포넌트가 반드시 클래스일 필요는 없다. => 함수여도 된다!

• 함수형 컴포넌트는 상태를 갖지 않고, render() 메소드만 가지는 컴포넌트를 더 편하게 작성하는 방법이다.

  function Square(props) {	// props 인자를 통해 객체를 받는다.
    return (
      <button className="square" onClick={props.onClick}>
        {props.value} <!-- this.props가 아닌 props 객체를 통해 값을 불러온다. -->
      </button>
    );
  }