react

skj1211·2022년 4월 24일

사용자 정의 태그

function Header() {
  return <header>
  <h1><a href="#">WEB</a></h1>
</header>
}
<Header></Header>

사용자 정의 태그는 반복되는 구조를 컴포넌트로 만들거나 간결하게 하기위해 사용자가 직접 정의하여 사용하는 태그이다.
대문자로 시작해야함

Tip
F1을 눌러 Open settings(JSON)에 들어간 후

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

위 코드를 추가하면 자바스크립트에서 HTML태그 자동완성을 할 수있다.

Prop
리액트에서는 속성을 prop 이라한다.

function Header(props) {
  return <header>
  <h1><a href="#">{props.title}</a></h1>
</header>
}
<Header title = "REACT"></Header>

파라미터 값으로 props를 넣고 사용 (다른 이름을 줘도 되지만 대부분 props를 넣는다고 함)
Header 의 title을 props.title로 가져와 사용할 수 있다.
{}안에 넣어주면 문자열이 아니라 표현식으로 인식한다.

React