댕구 공부공간

Props - 부모가 자식한테 어떤 값을 전달할 때 사용

State – 컴포넌트 자신이 값을 들고 있음

변화를 원할 때는 setState()을 이용함

리액트 코드 템플릿 자동 생성관련

https://lowell-dev.tistory.com/59

JSX란?

"javaScript Expression"의 약자

1. 태그를 열 시 꼭 닫아줘야한다. 

1-1 self closing tag - 한번 연 태그를 그 자리에서 닫는 것

2. 2개이상의 태그는 하나의 태그로 감싸야 한다. 

2-1 Fragment - 검사를 할 때 뜨지 않음

조건부 랜더링

1. 삼항연산자

2. AND 연산자 사용 -> 맞으면 출력

3. IIFE형식을 사용한 if문 [ JSX내부에서 작성해야 할 경우]

리액트 스타일 사용

스타일을 객체형식으로!

import React, { Component } from 'react';

class App extends Component {
render(){
    const style = {
    backgroundColor: 'black',
    color: 'aqua',
    padding: '16px',
    fontSize: '36px'
  };

  return <div style={style}>안녕</div>;
 }
}

export default App;

혹은

CSS파일을 연결해 ClassName등을 사용해 꾸미기