[TIL11] React의 기초

✅ JSX & React
✅ component와 props

JSX

자바스크립트의 확장 문법으로, javascript안에 html을 쓴 형태
UI가 어떻게 생겼는지 설명하기 위해 React와 함께 사용한다.

React의 기본특징

• self-closing이 가능하다
  예를들어, html에서는 <div> </div> 로 반듯이 표현해야하지만, <div/>로 사용할 수 있다.
  그리고, <input>, <img> 태그가 하나인 요소는 반듯이 <input />, <img /> 로 셀프크로징을 해줘야만 에러가 발생하지 않는다.
• 중첩JSX
  하나이상의 태그가 있는 경우 필수로 소괄호()로 감싸야하며, 여러개의 태그가 있는 경우에는 하나의 태그로 감싸줘야만 한다.
• Rendering(렌더링)
  렌더링이란, html요소또는 React요소 등의 코드가 눈에 보일 수 있도록 그려지는 것이다.
  React의 요소가 DOM node에 추가되어 화면어 렌더링되려면 ReactDOM.render이라는 함수를 사용한다.
  📣 예를들어 작성한 코드
  ReactDOM.render(<p>리액트는 처음이지</p>, document.getElementsById("root"));
<p>리액트는 처음이지</p> 👉 첫번째요소: jsx로 React요소를 인자로 넘기며, 이 자리에는 component가 올 수도 있다.
  document.getElementsById("root")); 두번째요소: 렌더하고 싶은 부모요소를 전달해준다. 즉, id가 "root"인 곳에 첫번쨰 요소를 전달하겠다라는 뜻!

Component

컴포넌트란, 재사용 가능한 UI단위로,
✔️ 독립적으로, 재사용이 가능한 코드로 여러조각을 나누어 관리
✔️ 하나의 컴포넌트에 필요한 html, css, js를 모두 합쳐서 만들 수 있다.
✔️ 함수랑 비슷하여, props(property)를 받아서 return(화면에 보여질 React요소들)을 할수 있다.

컴포넌트 만드는 방법은 두가지!!

이전에는 함수형으로 표현할 수 있는 것이 한계적이고 Class를 많이 사용했지만, Hook이 나온 이후로는 함수형이 더 많이 사용되고 있다.
하지만, 꼭 두가지 다 이해를 해야할 것!!

• 함수형

function 컴포넌트() {
return (<div>
  	  <p>리액트는 처음이지</p>
  	</div>);
}

• Class

class 컴포넌트 extends React.component {
  render()
return (<div>
  	  <p>리액트는 처음이지</p>
  	</div>);
}

컴포넌트의 사용

✔️ 태그처럼 사용한다. <컴포넌트명></컴포넌트명> or <컴포넌트명 />
✔️ 원하는 컴포넌트를 사용할 때 원하는 props를 얼마든지 사용할 수 있다.
  props.속성명으로 속성 value를 가지고 올 수 있다.

참고문헌(React자습서)