React 개요 & Component

woom·2023년 6월 9일
React
0

React

목록 보기
3/9
post-thumbnail

출처 : 패스트캠퍼스 한 번에 끝내는 프론트엔드 개발 초격차 패키지

📕 React 라이브러리

  • npm init -y : npm프로젝트로 만들기 위해서
  • npx serve : 파일 서버처럼 운영하기 위해서
  • ReactDOM.render(리액트 컴포넌트, 리액트 컴포넌트가 그려지는 곳)

  • p태그 만들어서 속성값은 null 내용값에 props를 가져와서 message와 count값 넣겠다.
const Component = (props) => {
      return React.createElement("p", null, `${props.message} : ${props.count}`);
    };
  • '+' 버튼 클릭 시 값 변경됨
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Example</title>
  <style>
    * {margin: 0;padding: 0;border: 0;}
    #root p {color: white;font-size: 20px;background-color: green;text-align: center;width: 200px;}
    #btn_plus {background-color: red;border: 2px solid #000000;font-size: 15px;width: 200px;}
  </style>
</head>
<body>
  <div id="root"></div>
  <button id="btn_plus">+</button>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script type="text/javascript">
    console.log(React);
    console.log(ReactDOM);

    const Component = (props) => {
      return React.createElement("p", null, `${props.message} : ${props.count}`);
    };

    ReactDOM.render(
      React.createElement(Component, {message: "init", count:0}, null) , document.querySelector("#root")
    );

    document.querySelector('#btn_plus').addEventListener('click', () => {
      ReactDOM.render(
        React.createElement(
          Component,
          {message: 'update', count: 10},
          null
        ),
        document.querySelector("#root")
      );
    });
  </script>     
</body>
</html>

📙 React.createElement

  • 형식
React.createElement(
	type, //태그 이름 문자열(ex. p태그) | (기존에 작성한)리액트 컴포넌트 | React.Fragment(속 알맹이만 사용)
    [props], //리액트 컴포넌트에 넣어주는(주입) 데이터 객체
    [...children] //컴포넌트에 자식으로 넣어주는 요소들
);
  • 예제

1. 태그 이름 문자열 type (리액트의 엘리먼트로 넣은 것)

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

2. 리액트 컴포넌트 type

  • 리액트 컴포넌트를 사용하기 위해서는 컴포넌트가 존재해야함 → 컴포넌트 정의
    //컴포넌트 정의
    const Component = () => {
      return React.createElement('p', null, 'type 이 "React 컴포넌트" 입니다.')
    }
    //<Component></Component> => <p>type 이 "React 컴포넌트" 입니다.</p>
    ReactDOM.render(
      React.createElement(Component, null, null),
      document.querySelector('#root')
    )

3. React.Fragment

  • 새로운 태그 속에 넣어지는 것이 아니라 root태그안에 포함됨
    • 하위 태그가 있어야지만 삽입 가능했으나 태그 없이도 자식을 포함시키는 것이 가능하게됨
ReactDOM.render(
      React.createElement(
        React.Fragment,
        null,
        'type 이 "React Fragement"입니다.'
      ),
      document.querySelector('#root')
    )

=> 복잡한 형태의 html 표현시 매우 어려움

📒 JSX

  • JSX 문법으로 작성된 코드는 순수한 JavaScript로 컴파일 하여 사용 (babel에 의해)

    • React.createElement에 비해 가독성 뛰어남
    • babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

  • JSX문법

    • 최상위 요소가 하나여야 한다.
    • 최상위 요소 return 하는 경우, ()로 감싸야 한다.
    • 자식들을 렌더링하고 싶으면 <> 자식들 </>을 사용 => Fragment
    • 자바스크립트 표현식은 {표현식}을 이용
    • if 문 사용 불가 => 삼항 연산자 혹은 && 사용
    • style을 이용해 인라인 스타일링 가능
    • class 대신 className을 사용해 class 적용 가능
    • 자식요소가 있으면 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 함

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
        ReactDOM.render(
        <div>
          <h1>title</h1>
        </div>,
        document.querySelector('#root')
      );

📌 babel

  • 우리가 작성한 어떤 코드를 순수하게 실행할 수 있는 자바스크립트로 변환하는 과정 필요

    • 이 과정은 babel에 의해서 진행됨

  • jsx문법을 이해해서 실행 가능

  • 홈페이지 : babeljs.io

    • Setup → Prototyping → In the browser
    • Usage → cdn 복사 붙여넣기, script type 수정(text → babel)

📗 Props & State

  • Props : 컴포넌트 외부에서 컴포넌트에게 주는 데이터
  • State : 컴포넌트 내부에서 변경할 수 있는 데이터

변경이 발생하면 렌더가 다시 발생

🔎 Props

  • 함수로 만든 컴포넌트
// {message: hi!!}
    function Component(props) {
      return (
        <div>
          <h1>{props.message}이것은 클래스로 만든 컴포넌트 입니다.</h1>
        </div>
      );
    }
    ReactDOM.render(<Component message ="hi!!" />, document.querySelector('#root'));
  • Class로 만든 컴포넌트 
    class Component extends React.Component{
      render(){
        return (
        <div>
          <h1>{this.props.message}이것은 함수로 만든 컴포넌트 입니다.</h1>
        </div>
      );
      }
    }
    ReactDOM.render(<Component message ="hi!!!" />, document.querySelector('#root'));
  • 기본값 삽입 가능
    Component.defaultProps ={ message: "기본값",}

🔎 State

객체로만 사용 가능

  • Class로 만든 컴포넌트 
    class Component extends React.Component{
      
      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,
          });
        }, 1000);
      }
      
      //두 번째 방법 - 이전 값 이용해서 변경하는 방식
      this.setState((previousState) => {
      	const newState = {count: previousState.count +1}
        return newState;
      });
      }, 1000);
    }

    Component.defaultProps ={ message: "기본값",}

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

📘 Event Handling

  • camelCase 로만 사용 가능(on 붙임)
    • ex. onClick, onMouseEnter
  • 이벤트에 연결된 자바스크립트 코드는 함수.
    • 이벤트 = {함수} 와 같이 사용
  • 실제 DOM요소들에만 사용 가능
    • 리엑트 컴포넌트에 사용하면, 그냥 props로 전달

💡 함수 컴포넌트

  • 버튼 클릭 시 콘솔에 로그 띄움
    function Component() {
      return (<div><button onClick={()=>{
        console.log("clicked");
      }}>click</button></div>
      );
    }

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

💡 Class 컴포넌트

  • ... state : state값 그대로 가져오겠다는 의미
   class Component extends React.Component{
      state = {
        count: 0,
      };
      
      render(){
        return (
          <div>
            <p>{this.state.count}</p>
            <button onMouseEnter={()=>{
              this.setState((state) => ({...state, count: state.count + 1,})) 
              }}>click
            </button>
          </div>
        );
      }
    }

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

📌 메소드 분리 작업

class Component extends React.Component{
      state = {
        count: 0,
      };
      
      render(){
        return (
          <div>
            <p>{this.state.count}</p>
            <button onClick={this.click}>click</button>
          </div>
        );
      }

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

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

📚 LifeCycle

  • Initialization: 생성자 prop가 생성되고 초기값 설정

  • Mounting: render(최초로 브라우저에 그려짐)

  • Updation: propst나 state가 변경되면 reder메소드가 다시 실행

  • constructor → getDerivedStateFromProps(props가 변경되면 다음 state값 전달) → render → componentDidMount → getDerivedStrateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate → componetWillUnmount

profile
woom
Study Log 📂
이전 포스트

컴포넌트, Props, event, state, CRUD

다음 포스트

React Router

0개의 댓글

관련 채용 정보