리액트 뽀개기 (1)

리액트를 설치 하면 hello World를 봐야 할 거 같아 출력해 줬다.

반갑다.

일단 이정도 만 해놓고 react 문서를 조금 읽어보자.

 

react의 사용에 있어서 jsx 문법을 사용해야 한다. 기본적인 정보는 아래에서 확인할 수 있다.

Introducing JSX – React

기본적으로는

1.) html이 아니며 바스 크립트의 문법 확장

2.) 리액트의 "요소"를 만든다.

3.) 자바스크립트 표현식은 {} 사용

4.) 속성으로 표현식을 포함시킬 때는 "" 사용하지 않는다.

5.) camelCase 사용.

6.) 객체로도 사용.

등 이 있다. 

 

또, css를 표현할 때도 

const style = {
    backgroundColor : 'pink',
    fontSize: '24px'
};

이런 식으로 camelCase를 사용한다

 

엘리먼트의 class 도 className 이 조금 더 올바른 표기법이다. 물론 class라고 적어서 안되는 것이 아니지만 그래도 권장되는 데에는 이유가 있을 것이다.

function getGreeting(user) {
    if (user) {
      return <h1 className="sample">Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
  }

 

리액트에서 setState를 정의할때 객체를 넣어줄때와 함수를 넣어줄때가 생긴다.

 

객체를 넣어줄때는 단순 변하는 값을 사용할때 넣어줄 수 있다.

 

  setState({
    count: this.state.count + 1,
  })

 

이상태를  아래와 같이 바꿔줄 수 있다.

 

  setState((prevState) => {
     return {
    	count: prevState.count + 1,
    };
  });

 

사실 위나 아래는 작동에 차이가 없다. 하지만 가독성면 에서 뛰어나기 때문에 아래와 같이 사용하는것을 권장한다.

 

hooks를 사용할때도 할수있다.