React 시작하기(1) - 컴포넌트

📔 리액트를 왜 쓰는가?

보통 새로운 기술이 나오면 그 전의 부족했던 점을 보완하기 위해서이다. 리액트는 single page application을 만들기 위한 것이다. 원래는 백엔드 개발자가 jQuery나 jsp등을 이용해 페이지를 만들어냈는데, 이제는 웹페이지(네이버 같은)가 아닌, 동적으로 활용 가능한 웹앱(구글 등)의 수요가 매우 커졌다. 다만, jsp같은 걸로 실시간으로 변하는 값들에 대해서 웹도 따라 변하게 구현하기가 너무 복잡해 react, angular, vue와 같은 SPA 프레임워크의 필요성이 대두되었다. 여러 SPA들 간의 차이점은 데이터와 화면의 일치 문제를 다른 방식으로 해결한 것이고, 그 중 살아남아 한국에서 대세가 된 것이 리액트이다.

📔 컴포넌트

• 리액트로 만들어진 앱을 이루는 최소한의 단위

컴포넌트 구성 요소

1) property(props)

• 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터
• 프로퍼티값은 자식 컴포넌트에서 수정할 수 없다.

2) state

• 컴포넌트의 상태를 저장하고 수정 가능한 데이터

3) context

• 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터

📃 컴포넌트 내에서 사용되는 jsx 문법

1) 컴포넌트의 이름은 항상 대문자로 시작하게 한다. → 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급한다.

2) input과 같은 태그는 닫는 태그 앞에 반드시 /를 붙여주어야 한다.

3) javascript코드는 반드시 중괄호로 묶어주어야 한다.

4) 텍스트의 경우 그냥 따옴표로 묶어주면 된다.

5) 리턴문 안에서는 if, for문을 사용할 수 없어 삼항 연산자나 map함수를 따로 활용하게 된다.

6) 리턴에는 단 한 개의 태그만 넣을 수 있어서 형제 태그를 한 번에 리턴하려면 부모 태그로 감싸주어야 한다.

7) 객체를 함부로 바꾸면 안되는 불변성의 특징이 있다. 객체를 바꾸지 말고 복사해서 사용할 것. state 객체를 바꿀 수 있는 setState함수가 제공된다.

📃 클래스형 컴포넌트 선언

<script type="text/babel">
  'use strict';

  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = {liked: false};
    }

    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }

      return (
        <button onClick={() => this.setState({liked: true})}>
          Like
        </button>
      );
    }
  }
</script>
<script type="text/babel">
	// react 17 버전 코드
  // ReactDOM.render(<LikeButton/>, document.querySelector('#root'));
	ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />);
</script>

📃 함수 컴포넌트 선언

<script type="text/babel">
  'use strict';

  const LikeButton = () => {
		const [liked, setLiked] = React.useState(false); //구조 분해
		if(liked){
			return 'You liked this.';
		}
		return (
			<button onclick={()=>{ setLiked(true); }}>Like</button>
		);
	}
</script>
<script type="text/babel">
	// react 17 버전 코드
  // ReactDOM.render(<LikeButton/>, document.querySelector('#root'));
	ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />);
</script>

참고

---

https://life-with-coding.tistory.com/508