React Component 만들기

React/React 2022. 5. 28. 07:23
728x90

https://ko.reactjs.org/docs/react-component.html 에 기본적인 React Component 사항을 확인한다.

 

 

컴포넌트는 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하기 위해 나온 기술이다.

컴포넌트는 두 가지 인스턴스 속성으로 props와 state를 가지고 있다.

props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다.
어떠한 값을 컴포넌트에 전달해 줘야 할때 사용하며 할당된 후 컴포넌트 내부에서 값을 변경할 수 없다.
state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. 동적인 데이터를 다룰 땐 state를 사용한다.

둘(props, state)다 변경이 되면, render 가 다시 일어날 수 있다.

 

Class Component 예제1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App Sample</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  //console.log(React);
  //console.log(ReactDOM);
 
  // 리액트 컴포넌트는 리엑트로 만들어진 앱을 이루는 최소한의 단위
  // 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수
  // 컴포넌트 이름은 항상 대문자로 시작해야 한다. 
// 소문자로 시작하는 컴포넌트는 DOM 태그로 취급하기 때문이다.
 
  // Class Component 정의
  class ClassComponent extends React.Component {
      // render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드
      render() {
          return <div>Hello React world.</div>;
      }
  }
 
  // 사용
  ReactDOM.render(
      <ClassComponent />,
      document.querySelector('#root')
  );
</script>
</body>
</html>

 

Function Component 예제1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App Sample</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  // 컴포넌트 이름은 항상 대문자로 시작해야 한다. 
// 소문자로 시작하는 컴포넌트는 DOM 태그로 취급하기 때문이다.
 
  // Function Component 정의
  function FunctionComponent() {
      return <div>Hello, React world.</div>;
  }
 
  // 화살표 함수 컴포넌트 정의
 const FunctionComponent2 = () => <div>Hello, React world.</div>;
 
  // 사용
  ReactDOM.render(
      <FunctionComponent />,
      document.querySelector('#root')
  );
</script>
</body>
</html>

 

React createElement 로 컴포넌트 만들기 예제

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App Sample</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  // 컴포넌트 이름은 항상 대문자로 시작해야 한다. 
  // 소문자로 시작하는 컴포넌트는 DOM 태그로 취급하기 때문이다.
 
  const Component = () => {
    return React.createElement('p', null, `type 이 "React 컴포넌트" 입니다.`);
    // React.createElement(태그, props, childeren)
  }
 
  // 사용
  ReactDOM.render(
      React.createElement(Component, null, null),
      document.querySelector("#root")
  );
</script>
</body>
</html>

 

위 예제는 태그가 여러개 일 경우 처리하는데 상당히 어렵다.

https://babeljs.io/ 사이트에서 직접 입력해보면...

자동으로 React.createElement 를 생성해주는 걸 확인할 수 있다.

 

React 에서 사용하는 JSX 문법

- 최상위 요소가 하나여야 한다.

- 자식들을 바로 랜더링하고 싶으면, <>자식들</>를 사용한다.

- 자바스크립트 표현식을 사용하려면 {표현식}을 이용한다.

- if 문을 사용할 수 없기 때문에 삼항연산자 혹은 &&를 사용한다.

- style을 이용해 인라인 스타일링이 가능하다.

- class 대신 className을 사용해 class를 적용할 수 있다.

- 자식요소는 엄격하게 쌍으로 닫아야 하고, 자식요소가 없다면 열면서 닫아야 한다. <br />

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>React App Sample</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
  // 사용
  ReactDOM.render(
      <div>
          <div>
              <h2>Front-end Frameworks</h2>
              <ul>
                  <li>React</li>
                  <li>Angular</li>
                  <li>Vue.js</li>
              </ul>
          </div>
      </div>,
      document.querySelector("#root")
  );
</script>
</body>
</html>

 

함수형 컴포넌트로 만들어서 바꾸면

<script type="text/babel">
  function Component() {
      return (
          <div>
              <div>
                  <h2>Front-end Frameworks</h2>
                  <ul>
                      <li>React</li>
                      <li>Angular</li>
                      <li>Vue.js</li>
                  </ul>
              </div>
          </div>
      )
  }
 
  // 사용
  ReactDOM.render(
      <Component />,
      document.querySelector("#root")
  );
</script>

 

이제 값을 전달하는 컴포넌트를 구현하는 간단 예제이다.

<script type="text/babel">
  function Component(props) {
      return (
          <div>
              <div>
                  <h2>Front-end Frameworks</h2>
                  <ul>
                      <li>{props.item}</li>
                      <li>Angular</li>
                      <li>Vue.js</li>
                  </ul>
              </div>
          </div>
      )
  }
 
  // 사용
  ReactDOM.render(
      <Component item="리액트" />,
      document.querySelector("#root")
  );
</script>

 

class 컴포넌트 값 전달 예제

전달하는 값이 없으면 기본으로 지정된 값이 보이는 걸 확인할 수 있다.

<Component item="React" />  라고 값을 지정하면 지정된 값이 출력되는 걸 확인할 수 있다.

<script type="text/babel">
    class Component extends React.Component {
        render(){
            return (
                <div>
                    <div>
                        <ul>
                            <li>{this.props.item}</li>
                        </ul>
                    </div>
                </div>
            )
        }
 
        static defaultProps = {
            item : "Vue.js"
        };
    }
 
    // 사용
    ReactDOM.render(
        <Component />,
        document.querySelector('#root')
    );
</script>

 

state

<script type="text/babel">
    class Component extends React.Component {
        // state = {
        //     count: 0,
        // }
 
        constructor(props) {
            super(props);
            this.state = { count: 0}
        }
 
        render() {
            return (
                <div>
                    <ul>
                        <li>{this.props.item}</li>
                        <li>{this.state.count}</li>
                    </ul>
                </div>
            );
        }
 
        componentDidMount() {
            setTimeout(() => {
                this.setState({
                    count: this.state.count + 1,
                });
            }, 1000);
        }
 
        static defaultProps = {
            item: "React"
        };
    }
 
    // 사용
    ReactDOM.render(
        <Component/>,
        document.querySelector('#root')
    );
</script>

 

componentDidMount 처리를 다르게 하는 법

<script type="text/babel">
    class Component extends React.Component {
        constructor(props) {
            super(props);
            this.state = { count: 0}
        }
 
        render() {
            return (
                <div>
                    <ul>
                        <li>{this.props.item}</li>
                        <li>{this.state.count}</li>
                    </ul>
                </div>
            );
        }
 
        componentDidMount() {
            setTimeout(() => {
                this.setState((previousState)=>{
                    const newState = { count: previousState.count + 1}
                    return newState;
                });
            }, 1000);
        }
 
        static defaultProps = {
            item: "React"
        };
    }
 
    // 사용
    ReactDOM.render(
        <Component item={"Front-End : React"} />,
        document.querySelector('#root')
    );
</script>

 

 

 

 

 

728x90
저작자표시 비영리

'React > React' 카테고리의 다른 글

React Query String  (0) 2022.06.08
React Router v6  (0) 2022.06.07
React useState  (0) 2022.06.04
React 값 전달(부모 → 자식, 자식 → 부모)  (0) 2022.06.03
React Event 처리하기  (0) 2022.05.29
블로그 이미지

Link2Me

,

카테고리

글 보관함

달력

«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28

공지사항

티스토리툴바