오늘은 공휴일인 관계로 헬스장이 문을 닫아 집에서 공부하다 같은 동기인 대희님을 만나 카페에서 공부를 했다.
이제는 리액트를 시작하기 앞서 간단히 나만의 개념정리를 해보겠다.
물론 이해는 가지 않지만 정리하고 반복적으로 보다보면 이해가 될 것이다..

React

리액트는 Javascript 라이브러리 이다. 라이브러리란 프로그램 제작시 필요한 기능을 뜻함. 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것. 제작 시 엄격한 규칙이 존재하지 않으며 제작 의도에 맞게 작성하면 됨.

JSX

HTML 문법을 Javascript 코드 내부에 쓴 것!
변수에 저장도 가능, 함수의 인자로 넘길 수도 있음.

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>고기</li>,
    animal: <li>cat</li>,
    hobby: <li>programming</li>
};

JSX attribute

태그에 속성을 주고 싶을 땐 항상 쌍따옴표("") 사용.

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>고기</li>,
    animal: <li>cat</li>,
    hobby: <li className="list-item">programming</li>
}

참고로 JSX에서는 어떤 태그라도 self closing tag 가능

Nested JSX(필수 조건)

• 소괄호로 감싸기 (중첩된 요소는!)

const good = (
<div>
   <p>Hi</p>
</div>    
)

• 항상 하나의 태그로 시작

const wrong = (
<p>list1</p>
<p>list2</p>
)

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
)

Rendering

html 요소나 React 요소 등의 코드가 눈에 보일 수 있도록 하는 것.
React 요소를 화면에 렌더링시키려면 ReactDOM.render 함수를 사용.

ReatDOM.render(
	<h1>Hello, sangyeon</h1>,
    document.querySelector('#root')
)

Component

컴포넌트란 재사용 가능한 UI 단위.

Component 만들기

React에서는 컴포넌트를 class나 함수로 만들 수 있다. 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장,

함수형 컴포넌트

import React from 'react';

function App() {
  const name = '리액트';
  return <div>{name}</div>;
}

export default App;

클래스형 컴포넌트

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = '리액트';
    return <div>{name}</div>;
  }
}

export default App;

둘의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음. 반면 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 더 편하고, 메모리 자원을 덜 사용한다는 장점.

Component 사용

정의한 컴포넌트는 함수/class 이름으로 사용가능.
우리가 정의한 컴포넌트를 사용할 때 ,원하는 attribute를 얼마든지 추가 가능. 그러면 Welcome 컴포넌트에서 parameter로 해당 attribute를 받아서 사용 가능. 이것을 props라고 함.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);