React 시작하기 - JSX, Component(Props, State)

React is

React.js는 JavaScript 라이브러리이다.
*Library : 프로그램 제작 시 반복적인 코드 작성을 없애기 위해 언제든지 필요한 곳에서 호출하여 사용할 수 있도록 Class나 Function으로 만들어진 것

JSX

• HTML과 비슷하게 생긴 JavaScript 확장 버전 문법.
  JSX는 자바스크립트 문법이 아니라서 브라우저에서 해석하지 못하기 때문에 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요하다.

JSX element

• HTML문법을 JavaScript 코드 내부에 써주면 그것이 바로 JSX. 변수에 저장할 수도 있고 함수의 인자로도 넘길 수 있다.

JSX attribute

• 태그에 속성을 주고 싶을 때는 항상 ""쌍따옴표 사용.
  실제 HTML에서 쓰는 속성명과 다르기 때문에 리액트 공식문서를 참고해야한다.

• class를 주고싶을 때는 원래 속성명은 class이지만 JSX에서는 className을 사용해야한다.

• Self-Closing Tag : JSX에서는 어떤 태그라도 self closing tag가 가능하다. ex) <input/>

• 항상 소괄호로 감싸고, 하나의 태그로 시작해야한다.

const good = (
  <div>
  	<p>hi<p>
  </div>
  ); //중첩된 요소를 만들 시 소괄호로 감싸기

const right = (
  <div>
  	<p>list1</p>
  	<p>list2</p>
  </div> //항상 하나의 태그로 시작

Rendering

html요소 또는 react요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것.

react요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render함수를 사용한다.

Component와 Props

Componenet란

쉽게 말해 사용자 정의 태그라고 할 수 있다. 웹페이지 안에서 같은 속성을 가진 태그를 여러개 사용할 경우 html코드를 복붙하면서 디자인을 위해 css도 각각 같이 작성하는 과정을 거쳤다.

만약 이후에 페이지가 추가되어 같은 속성 태그가 필요하다면 또 똑같은 html과 css를 작성해주어야 하는데, 이럴 때 동일 코드가 반복되는 부분을 하나의 componenet로 만들어서 같은 디자인의 속성 태그를 필요한 곳 마다 재사용할 수 있다.

컴포넌트는 독립적으로 재사용 가능한 코드로 관리가 가능하다. 하나의 컴포넌트에 필요한 htlml,css,js를 모두 합쳐서 만들 수 있다. *like function...

Component 만들기

• 함수로 구현

function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;}

• class로 구현
  render()메서드는 무조건 정의해야하며 retur도 해주어야 한다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}<h1>;
  }
}

위처럼 정의한 컴포넌트는 함수/class이름으로 사용할 수 있다. 태그처럼 으로 작성.

// 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')
);

Props란

우리가 정의한 컴포넌트에서 속성을 받아 사용할 수 있는데, 이를 props라고 한다. props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터로, (자식 입장에서) 읽기 전용이다. props는 property의 줄임말이다. .(dot)으로 속성명에 접근 가능하고, props.속성명으로 속성 값을 가져올 수 있다.

Component의 State

State란

state란 말 그대로 컴포넌트의 상태 값이다. state와 props는 둘 다 object이고, 화면에 보여줄 정보나 상태를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter처럼), state는 컴포넌트 내에서 정의하고 사용한다. 읽기 전용인 props와 비교해서 보자면, 쓰기 전용이라고 볼 수 있다.

<Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        ></Subject> // App에서 state사용

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
} //Subject파일에서 사용

constructor()

constructor는 class의 instance가 생성될 때 항상 호출되는 함수(생성자)이다.
초기화할 값들은 constructor에서 세팅해준다고 보면 된다.

props state

어떤 제품이 있을 때 사용자의 입장과 구현자의 입장이 있음.
사용자의 입장에서는 제품을 조작하는 것들이 버튼이나 화면 - props
구현자는 내부적 조작장치들과 매커니즘을 다루는데 이를 state

props : 사용자가 컴포넌트를 사용하는 입장에서 중요 - 사용자한테 중요!!
state : props의 값에 따라서 내부 구현에 필요한 데이터들

둘은 철저하게 구분되어야 한다.

어떠한 컴포넌트가 실행될 때 render 함수보다 먼저 실행되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 constructor 안에다가 코드를 작성한다.