리액트 공식문서 읽기(1)

JSX if문

//좋은 예
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

// 나쁜 예
const Hello = () => {
  return (
    <div>
    {
      if(1+1 === 2){
        return (<div>참</div>)
      } else {
        return (<div>거짓</div>)
      }
    }
   </div>
  )
}   

어튜리뷰트에 js 표현식 삽입

const element = <img src={user.avatarUrl}></img>;

어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하지 마세요. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 어트리뷰트에 두 가지를 동시에 사용하면 안 됩니다.

프롭스 객체

//이렇게 엘리먼트를 만들고 나면...
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// 이런 리액트 엘리먼트가 생성되는 것임!
const element = {
  type: 'h1',
  props: { // 이 부분 머릿속으로 그림 잘 그리기!
    className: 'greeting',
    children: 'Hello, world!'
  }
};

함수 컴포넌트와 클래스 컴포넌트

// 함수 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

컴포넌트 이름 대문자로

React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다. 예를 들어 <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 합니다.

props는 읽기 전용

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

이에 대한 대안이 바로 state
(* 근데 정확히 읽기전용이라는 게 무슨 말이지? prop 자체를 바꾸면 안 된다는 건가...?)

State 올바르게 사용하기

왜냐면, this.props와 this.state가 비동기적으로 업데이트될 수 있음!

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

State 병합은 얕게 이루어진다

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

병합은 얕게 이루어지기 때문에 this.setState({comments})는 this.state.posts에 영향을 주진 않지만 this.state.comments는 완전히 대체됩니다.