TIL 12 | React Component Basic

dongwheekeem·2021년 9월 19일
0

TIL

목록 보기
12/23

이전에 React를 왜 사용하는지, 어떻게 초기에 셋팅하는지에 대해 알아봤다.
오늘은 해당 라이브러리를 사용할 때 제일 기본이 되는 Component에 대해 알아보자.

Component?

  • 간단하게 말하자면 재활용이 가능한 UI 구성 단위이다.
    (복잡한 코드를 획기적으로 단순화시키기 위해서 React를 활용하여 컴포넌트를 만들고, 똑같은 내용을 다른 곳에서도 단순하게 사용할 수 있음)

Component 특징

  • Component에는 함수형과 클래스형이 있다.
  • Component를 사용하기 위해서는 먼저 클래스형에서는 import React from "react”를 적어줘야 하고, 함수형에서는 import React from "react" 를 적어줄 필요 없다. (업데이트 돼서 안 써도 된다고 한다.)
  • Component명은 항상 대문자로 시작한다. (컴포넌트명은 태그로 감싸게 되는데, JavaScript 문법에서 태그 안에 소문자로 시작하는 거는 태그로 인식하기 때문에 차별을 주기 위해 그런 것)

Component 만드는 방법


  • 클래스형 컴포넌트로 Subject라는 컴포넌트를 만드는 방법
    (return 안에 필요한 html 내용을 넣는다)
class Subject extends Component {
	render () {
		return (
		<header>옮겨올 태그 내용
			<h1> Web </h1>
			World Wide Web!
		</header>
		);
	}
}

  • Subject컴포넌트 만든 거를 React로 표기할 때 :
class App extends Component {
	render () {
		return (
		<div className = “App”>
		  <Subject></Subject>
		</div>
		);
	}
}
  • 주의할 점: return 안에는 전체를 감싸는 단일 태그 <>가 필요하다. 상기같은 경우에는 div태그이다. 간혹 아래와 같은 경우에는 에러가 뜨니 주의하자!
class App extends Component {
	render () {
		return (
		<div className = “App”>
		  <Subject></Subject>
		</div>
                <div>
                </div>
		);
	}
}

index.js

ReactDOM.render(<App />, document.getElementById("root"));

index.js 파일에 보면 상기와 같은 코드가 기본적으로 적혀 있다. 저게 무슨 뜻일까? 실질적으로 저 코드로 인해 화면에 띄어주는 것을 볼 수 있기 때문에 무엇인지 알고 가는 게 중요하다고 본다.

  • ReactDOM.render 의 함수 인자는 2개이다. (첫번째는 화면에 보여주고 싶은 컴포넌트, 두번째는 화면에 보여주고 싶은 컴포넌트의 위치)
  • document.getElementById("root") : DOM을 활용하여 id 값이 root인 것을 html에서 가져온다는 뜻
  • <App /> : App 이라고 하는 컴포넌트

즉, document.getElementById("root") 안에 <App />을 그려주겠다 라는 뜻이다.


profile
실패란 못하는 것이 아니라 하지 않았기 때문에 생긴 결과물이다

0개의 댓글