JSX

스크린샷 2019-08-11 오전 12.09.25.png

() 를 사용 하지 않아도 오류는 발생하지않지만 가독성을 위해 써준다.

컨테이너 엘러먼터 <div> 안에 포함이켜줘야한다.
1번예제는 틀리고 2번 예제처럼 써줘야한다.

스크린샷 2019-08-11 오전 12.10.39.png
div안 text를 {} 감쌌다. ===> JSX에서 JS 표현하는 방법

스크린샷 2019-08-19 오후 8.26.42.png

let은 render() 안에 써준다.

스크린샷 2019-08-11 오전 12.12.16.png

background-color === X
backgrounColor === O camelCase으로 사용

스크린샷 2019-08-11 오전 12.40.40.png

주석표현 {/*...*/}
주석 또한 컨테이너 안에 작성되어야한다. <div>안


Component

컴포넌트는 독립적으로, 재사용가능한 코드로 관리할 수 있습니다. 하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있다.
모든 리액트 컴포넌트는 render 메소드가 있다. 이 메소드는 컴포넌트가 어떻게 생길지 정의를 해준다.
컴포넌트는 함수랑 비슷합니다. React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return된다.

함수로 Welcome 컴포넌트 구현하기

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

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

1. props.name의 값을 사용
2. div로 감싸져있고, <Welcome /> 컴포넌트를 세번 사용했습니다. name이라는 attribute 부여
3. ReactDOM.render 함수로 React 요소를 그려준다. root라는 id를 찾아 <App /> 컴포넌트를 그려준다.

더 작은 Component로 분리하기

Comment 컴포넌트 내에도 더 재사용할 수 있다.


props & state

props

js에서의 객체와 똑같은 의미
부모 컴포넌트에서 자식 컴포넌트로 넘겨주는 값
컴포넌트 내부의 변화하지 않는 데이터를 처리할때 사용된다.
JSX 내부에 {this.props.propsname} 넣어준다.
사용할때는 propsname ="value"

class Codelab extends React.Component{
  render(){
    return(
     <h1>hello</h1>
     <div>{this.props.propsName}</div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab name = "velopert">이 사이에 있는거</Codelab>
    );
  }
}

ReactDOM.render(<App/>.document.getElementById('root'));

스크린샷 2019-08-19 오후 9.01.33.png

class Codelab extends React.Component{
  render(){
    return(
     <h1>hello</h1>
     <div>{this.props.propsName}</div>
    );
  }
}
class App extends React.Component{
  render(){
    return(
      <Codelab {this.props.propsName}>{this.props.children}</Codelab>
    );
  }
}

ReactDOM.render(<App name="velopert>이 사이에 있는거</App>.document.getElementById('root'));

state

class내부에서만 사용가능
유동적인 데이터를 처리할때
{this.state.stateName}
초기값 설정이 필수 생성자에서 this.state={} 으로 설정
this.setstate({})로 값을 수정 할 수 있다.


class Counter extends React.Component{
  render(){

  constructor(props){               //state 사용시에는 초기값 설정이 필수다.
    super(props);                   //constructor의 props 는 constructor 가 만들어 질때
    this.state = {value:0             전달 되는 인자인다.
    this.handleClick = this.handleClick(this); 
    };                              //super가 먼전실행해주어야 this.state에 접근할 수 있다.
  }  

  handleClick(){
    this.setstate({
      value:this.state.value + 1
    })

    return(
     <div>
      <h2>{this.stats.value}</h2>
      <button onClick={this.handleClick.bind(this)}>Press me</button>
     </div>
    );
  }
}

class App extends React.Component{
  render(){
    return(
      <Codelab/>
    );
  }
};

ReactDOM.render(<App></App>.document.getElementById('root'));