33일차

🐻

33일차

 

Part 10. React 로 쇼핑몰 만들기 (React 기본)

Ch 2. React Component

 

---

 

 

Ch 2. React Component

 

 

 🔗 React Component 만드는 법 

 

// Class Component

// 정의
class ClassComponent extends React.Component {
    render() {
      return <div>Hello</div>;
    }
}

// 사용
ReactDOM.render(<ClassComponent />, document.querySelector("#root"));

 

// Function Component 1

// 정의
function FunctionComponent() {
	return <div>Hello</div>;
}

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector("#root"));

// Function Component 2

// 정의
const FunctionComponent = () => <div>Hello</div>;

// 사용
ReactDOM.render(<FunctionComponent />, document.querySelector("#root"));

 

 

 🔗 React.createElement 로 컴포넌트 만들기 

 

React.createElement(
	type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
	[props], // 리액트 컴포넌트에 넣어주는 데이터 객체
	[...children] // 자식으로 넣어주는 요소들
);

 

// 1. 태그 이름 문자열 type

// <h1>type 이 "태그 이름 문자열" 입니다.</h1>;
ReactDOM.render(
	React.createElement("h1", null, `type 이 "태그 이름 문자열" 입니다.`),
	document.querySelector("#root")
);

// 2. 리액트 컴포넌트 type

const Component = () => {
    return React.createElement(
    	"p",
    	null,
    	`type 이 "React 컴포넌트" 입니다.`
    );
};

// <Component /> => <p>`type 이 "React 컴포넌트" 입니다.`</p>
ReactDOM.render(
	React.createElement(Component, null, null),
	document.querySelector("#root")
);

// 3. React.Fragment => 요소를 여러개 넣을 수 있다.

ReactDOM.render(
    React.createElement(
        React.Fragment,
        null,
        `type 이 "React Fragment" 입니다.`,
        `type 이 "React Fragment" 입니다.`,
        `type 이 "React Fragment" 입니다.`
    ),
    document.querySelector("#root")
);

  // 4. 복잡한 리액트 엘리먼트 모임

  // <div>
  //   <div>
  //     <h1>주제</h1>
  //     <ul>
  //       <li>React</li>
  //       <li>Vue</li>
  //     </ul>
  //   </div>
  // </div>;
  ReactDOM.render(
    React.createElement(
      "div",
      null,
      React.createElement(
        "div",
        null,
        React.createElement("h1", null, "주제"),
        React.createElement(
          "ul",
          null,
          React.createElement("li", null, "React"),
          React.createElement("li", null, "Vue")
        )
      )
    ),
    document.querySelector("#root")
  );

 

 

 🔗 JSX 

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

  // 우리가 작성한 어떤 코드를 => 순수하게 실행할 수 있는 자바스크립트
  // babel

  const title = "주제";
  ReactDOM.render(
    <div a="a">
      <div>
        <h1>{title}</h1>
        <ul>
          <li>React</li>
          <li>Vue</li>
        </ul>
      </div>
    </div>,
    document.querySelector("#root")
  );

 

 

 🔗 Props 와 State 

 

 

  // {message: '안녕하세요!'}
  function Component(props) {
    return (
      <div>
        <h1>{props.message} 이것은 함수로 만든 컴포넌트 입니다.</h1>
      </div>
    );
  }

  Component.defaultProps = {
    message: "기본값",
  };
  
  ReactDOM.render(
    <Component message="기본값 아님" />,
    document.querySelector("#root")
  );

 

  class Component extends React.Component {
    // state = {
    //   count: 0,
    // };

    constructor(props) {
      super(props);

      this.state = {
        count: 0,
      };
    }

    render() {
      return (
        <div>
          <h1>
            {this.props.message} 이것은 클래스로 만든 컴포넌트 입니다.
          </h1>
          <p>{this.state.count}</p>
        </div>
      );
    }

    componentDidMount() {
      setTimeout(() => {
        // this.setState({
        //   count: this.state.count + 1,
        // });
        this.setState((previousState) => {
          const newState = {
            count: previousState.count + 1,
          };
          return newState;
        });
      }, 1000);
    }

    static defaultProps = {
      message: "기본값2",
    };
  }

  ReactDOM.render(
    <Component message="기본값 아님" />,
    document.querySelector("#root")
  );

 

 

 🔗 Event Handling 

 

  class Component extends React.Component {
    state = {
      count: 0,
    };
    // constructor(props) {
    //   super(props);

    //   this.click = this.click.bind(this);
    // }

    render() {
      return (
        <div>
          <p>{this.state.count}</p>
          <button onClick={this.click}>클릭</button>
        </div>
      );
    }

    click = () => {
      console.log("clicked");
      this.setState((state) => ({
        ...state,
        count: state.count + 1,
      }));
    };
  }

  ReactDOM.render(<Component />, document.querySelector("#root"));

 

 

 🔗 Component Lifecycle 

 

(v16.3 이전)

  class App extends React.Component {
    state = {
      age: 39,
    };
    interval = null;
    constructor(props) {
      super(props);
      console.log("constructor", props);
    }

    render() {
      console.log("render");
      return (
        <div>
          <h2>
            Hello {this.props.name} - {this.state.age}
          </h2>
        </div>
      );
    }

    componentWillMount() {
      console.log("componentWillMount");
    }
    componentDidMount() {
      console.log("componentDidMount");

      this.interval = setInterval(() => {
        // console.log("setInterval");
        this.setState((state) => ({ ...state, age: state.age + 1 }));
      }, 1000);
    }

    componentWillReceiveProps(nextProps) {
      console.log("componentWillReceiveProps", nextProps);
    }
    shouldComponentUpdate(nextProps, nextState) {
      console.log("shouldComponentUpdate", nextProps, nextState);

      return true; // ⭐ false or true
    }
    componentWillUpdate(nextProps, nextState) {
      console.log("componentWillUpdate", nextProps, nextState);
    }
    componentDidUpdate(prevProps, prevState) {
      console.log("componentDidUpdate", prevProps, prevState);
    }

    componentWillUnmount() {
      clearInterval(this.interval);
    }
  }

  ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

~말고 ~써라 라는 경고가 많이 나옴

 

(v16.3)

  let i = 0;
  class App extends React.Component {
    state = {
      list: [],
    };

    render() {
      return (
        <div id="list" style={{ height: 100, overflow: "scroll" }}>
          {this.state.list.map((i) => {
            return <div>{i}</div>;
          })}
        </div>
      );
    }

    componentDidMount() {
      setInterval(() => {
        this.setState((state) => ({ list: [...state.list, i++] }));
      }, 1000);
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
      if (prevState.list.length === this.state.list.length) return null;
      const list = document.querySelector("#list");

      return list.scrollHeight - list.scrollTop;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
      console.log(snapshot);
      if (snapshot === null) return;
      const list = document.querySelector("#list");
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));

 

 

 🔗 Component 에러 캐치 - componentDidCatch 

 

https://reactjs.org/docs/error-boundaries.html

Error Boundaries – React

 

  class App extends React.Component {
    state = {
      hasError: false,
    };

    render() {
      if (this.state.hasError) {
        return <div>예상치 못한 에러가 발생했다.</div>;
      }
      return <WebService />;
    }

    componentDidCatch(error, info) {
      this.setState({ hasError: true });
    }
  }

  ReactDOM.render(<App name="Mark" />, document.querySelector("#root"));