react 주요 개념

선언형

명령형 코드는 How에 집중하지만 선언형 코드는 What에 집중하는 코드로
React의 상태를 통해 UI를 작업하면 DOM이 UI와 일치하도록 해주며
attribute, event, dom 업데이트를 추상화 하여 작업할 수 있다.

컴포넌트 기반

컴포넌트들을 조합해 UI를 구성하고 이는 재사용이 가능하며 상태를 관리할 수 있다.

확장성

UI를 만들기위한 라이브러리이기 때문에 필요한 기능은 추가 적용이 가능하고
서버사이드 렌더링도 지원하며, RN을 통한 하이브리드 모바일 앱도 만들 수 있다.

JSX

자바스크립트 확장 문법으로 HTML과 JS로직을 한번에 작성할 수 있어 편리하며 가독성도 우수하다.
브라우저에서 실행되기 전에 바벨을 통해 JS형태로 변환된다 (바벨)

ReactDOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하기 때문에
앱에서 명시적으로 작성하지 않은 내용은 주입되지 않고 렌더링 되기 전에 문자열로 변환된다.
그러므로 XSS공격을 방지할 수 있다.

Props

읽기 전용으로 Props를 수정해서는 안된다. 모든 컴포넌트는 자신의 Props를 다룰때
순수함수처럼 동작해야 한다.

순수함수는 입력 값을 변경하지 않으며 동일한 입력값에 동일한 결과를 반환하는 함수

State

리액트에서 View를 변화시키는 요소로 State가 변경되면 리렌더링이 일어난다.
(리렌더링은 Props가 변경되거나, State가 변경되거나, 부모 컴포넌트가 리렌더링되거나, forceUpdate를 할 경우 총 4가지 이다.)텍스트

생명 주기

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);
//<Clock />가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출합니다. 

//Clock이 현재 시각을 표시해야 하기 때문에 현재 시각이 포함된 객체로 this.state를 초기화합니다. 나중에 이 state를 업데이트할 것입니다.

//React는 Clock 컴포넌트의 render() 메서드를 호출합니다. 
//이를 통해 React는 화면에 표시되어야 할 내용을 알게 됩니다. 

//그 다음 React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM을 업데이트합니다.
//Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출합니다. 
//그 안에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 //요청합니다.

//매초 브라우저가 tick() 메서드를 호출합니다. 
//그 안에서 Clock 컴포넌트는 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 
//진행합니다. 

//setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해/ //render() 메서드를 다시 호출합니다. 

//이 때 render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시각을 
//포함합니다. React는 이에 따라 DOM을 업데이트합니다.

//Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 //componentWillUnmount() 생명주기 메서드를 호출합니다.

Key

리액트에서 map을 이용해 엘리먼트를 반복해서 리스트 형식으로 생성할 때
엘리먼트에 Key Props를 설정해야 한다.
Key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별함에 도움을 준다.
고유해야하며 변하지 않는 값을 주는 것이 효율적이다.
(고유해야 하는 범위는 형제 엘리먼트 사이에서이며 전체 범위가 아니다)

리액트로 생각하기

1. 컴포넌트로 나누기
2. 정적 React 만들기
3. State 결정하기
4. State 위치선정
5. 역방향 데이터 흐름 추가하기