리액트 JSX, State, 생명주기 메서드

#2.6 JSX part Two

//JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게 설치하기.
https://unpkg.com/@babel/standalone/babel.min.js

//바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식한다.
<script type="text/babel">

현재 JSX 코드를 감싸고 있는 기존의 script 태그 안에 type="text/babel" 을 작성해줘야 한다.

10번 줄 <script type="text/babel"> ~ 39번 줄 </script>가 JSX 코드를 감싸고 있는 기존의 script 태그이다.

 

//JSX는 자바스크립트를 확장한 문법 보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨(props == propertys)
const Title = (
console.log("mouse enter")}>
Hello I'm a span
);

#3.0 Understanding State

 

리액트가 아닌 경우, 일반 자바스크립트를 쓴 브라우저는 노드정보가 바뀔때마다 노드트리를 처음부터  5단계에 걸쳐서 다시 생성한다.

반면에 리액트는 가상돔을 써서 화면상 보이는 부분만 수정해서 나타내고 모든 업뎃이 끝나면 일괄로 합쳐서 실제 돔에 던져준다.

브라우저 작동원리와 연관있기 때문에 렌더트리 단계를 얼마나 최적화하는가에 따라서 변경된 부분만 업데이트 되는것이 좋다.

 

리액트 생명주기 메서드

 

 

constructor()

constructor(props)

메서드를 바인딩하거나 state를 초기화하는 작업이 없다면, 해당 React 컴포넌트에는 생성자를 구현하지 않아도 됩니다.

React 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출됩니다. React.Component를 상속한 컴포넌트의 생성자를 구현할 때에는 다른 구문에 앞서 super(props)를 호출해야 합니다. 그렇지 않으면 this.props가 생성자 내에서 정의되지 않아 버그로 이어질 수 있습니다.

React에서 생성자는 보통 아래의 두 가지 목적을 위하여 사용됩니다.

• this.state에 객체를 할당하여 지역 state를 초기화
• 인스턴스에 이벤트 처리 메서드를 바인딩

constructor() 내부에서 setState()를 호출하면 안 됩니다. 컴포넌트에 지역 state가 필요하다면 생성자 내에서 this.state에 초기 state 값을 할당하면 됩니다.

constructor(props) {
  super(props);
  // 여기서 this.setState()를 호출하면 안 됩니다!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

생성자는 this.state를 직접 할당할 수 있는 유일한 곳입니다. 그 외의 메서드에서는 this.setState()를 사용해야 합니다.

생성자 내에서는 부수 효과를 발생시키거나 구독 작업(subscription)을 수행하면 안 됩니다. 해당 경우에는 componentDidMount()를 대신 사용하세요.

주의

state에 props를 복사하면 안 됩니다! 가장 흔히 범하는 실수 중 하나입니다.

constructor(props) {
 super(props);
 // 이렇게 하지 마세요!
 this.state = { color: props.color };
}

이것은 불필요한 작업이며(this.props.color를 직접 사용하면 됩니다), 버그를 발생시킵니다(color props의 값이 변하더라도 state에 반영되지 않습니다).

props의 갱신을 의도적으로 무시해야 할 때만 이와 같은 패턴을 사용하기 바랍니다. 이 경우, 해당 props의 이름을 initialColor 또는 defaultColor 등으로 변경하는 편이 자연스럽습니다. 그러면 이후 필요에 따라 컴포넌트가 key를 변경하여 초기 state를 “재설정”하도록 강제할 수 있습니다.

props의 값에 의존하는 state가 필요할 때 어떻게 해야 하는지에 대하여 알고 싶다면, 우리가 작성한 state로부터 값을 가져오지 않는 법에 대한 블로그 글을 읽어보세요.

---

render()

render()

render() 메서드는 클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메서드입니다.

이 메서드가 호출되면 this.props와 this.state의 값을 활용하여 아래의 것 중 하나를 반환해야 합니다.

• React 엘리먼트. 보통 JSX를 사용하여 생성됩니다. 예를 들어, <div />와 <MyComponent />는 React가 DOM 노드 또는 사용자가 정의한 컴포넌트를 만들도록 지시하는 React 엘리먼트입니다.
• 배열과 Fragment. render()를 통하여 여러 개의 엘리먼트를 반환합니다. 자세한 정보는 Fragments 문서를 통하여 확인할 수 있습니다.
• Portal. 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링합니다. 자세한 정보는 Portals에서 확인할 수 있습니다.
• 문자열과 숫자. 이 값들은 DOM 상에 텍스트 노드로서 렌더링됩니다.
• Boolean 또는 null. 아무것도 렌더링하지 않습니다. (대부분의 경우 return test && <Child /> 패턴을 지원하는 데에 사용되며, 여기서 test는 boolean 값입니다.)

render() 함수는 순수해야 합니다. 즉, 컴포넌트의 state를 변경하지 않고, 호출될 때마다 동일한 결과를 반환해야 하며, 브라우저와 직접적으로 상호작용을 하지 않습니다.

브라우저와 상호작용하는 작업이 필요하다면, 해당 작업을 componentDidMount()이나 다른 생명주기 메서드 내에서 수행하세요. render()를 순수하게 유지하여야 컴포넌트의 동작을 이해하기 쉽습니다.

주의

shouldComponentUpdate()가 false를 반환하면 render()는 호출되지 않습니다.

---

https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/