react 정보

react 를 사용하기 위해 먼저 import를 사용합니다.

import React , { component} from “react”;

class Main extends component{
}

위 코드와 아래 코드 뜻은 같습니다.

import React from ‘react’;
class Main extends react.component { 
}

요즘은 아래 처럼 써도 기능합니다.

import {Component} from “react” ;

class Main extends Component {}

jsx에서 스타일을 줄때 객체 형태로 인라인 스타일을 줘야 합니다.
카멜케이스로 사용하며 자바스크립트 문법을 넣을때는 {}를 사용하여 감싸줘야 합니다. 스타일(style)은 객체형태로 써야 하기 때문에 {{}} 두개가 사용됩니다.

화살표 함수 말고 일반 함수를 작성하면 this를 구분하지 못합니다. 그래서 화살표 함수를 많이 사용합니다.
화살표 함수의 this는 컴포넌트를 가리킵니다.
일반 함수를 사용하려면 bind를 사용해야 합니다.

인라인 스타일을 사용하지 않고 조종하는 방법
클래스 네임에서 동적값이 설정 가능합니다.

classname = { this.state.titleColor ? “red” : “blue”

scss에서 네스팅후 변수 값으로 색을 줍니다.
.main {
.red{
color: red;
}
.blue {
color: blue;}
}

setState를 호출하면 render 부분이 다시 호출되기 때문에
직접 state를 변경하지 말고 setState를 활용해서 변경해야 합니다.

state

컴포넌트 내부에서 가지고 있는 컴포넌트 상태의 값
화면에 보여줄 컴포턴트의 UI 정보(상태)를 지니고 있는 객체

render(){}값 위에 constructor()와 super()의 값안에서 state를 설정하여
기본 초기의 틀을 설정해줍니다.
render() 내부에서는 setState를 사용하여 state 값들을 변경할수 있습니다.

사용 예시 )

class State extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Class Component | State</h1>
      </div>
    );
  }
}

Props

컴포넌트의 속성값
부모 컴포넌트로 부터 전달 받은 데이터를 지니고 있는 객체입니다.

부모의 컴포넌트에서는 state를 사용하고 자식 컴포넌트에서는 props를 사용하여 부모의 값을 전달 받을수 있습니다.

자식의 컴포넌트에서 this.props.키 형식으로 사용됩니다.

Props는 일방향 통로 입니다.
모든 코드가 그렇듯이 위에서 부터 아래로 코드를 실행합니다.