공부/React 썸네일형 리스트형 class vs function 리액트에서 컴포넌트를 만드는 두 가지 방법 class 스타일 function 스타일 class 리액트의 기능을 100% 활용할 수 있다. 문법알아야 한다. function 간편하다. 기능이 부족했다. 컴포넌트 내부의 state 를 만들어 사용하는 것을 할 수 없었다. 컴포넌트의 생성, 변경, 소멸에 대한 이벤트인 라이프사이클 API를 사용할 수 없었다. 하지만 hook 개념이 도입되면서, 위의 부족한 것을 할 수 있게돼었다. shouldComponentUpdate shouldComponentUpdate 컴포넌트의 render 함수가 실행돼야 하는지, 실행되지 않아야 하는지를 결정할 수 있게 해주는 함수 render 는 비용이 많이든다. props, state 의 변경에 따라 호출된다. render 이전에 shouldComponentUpdate 실행된다. shouldComponentUpdate 의 반환값이 true 이면 render가 호출되고, false 이면 render가 호출되지 않는다. shouldComponentUpdate 를 통해 새롭게 바뀐 값과 이전 값에 접근할 수 있다. newProps 로 새롭게 바뀐 값 접근 this.props 를 통해 현재 값 접근 shouldComponentUpdatE(newProps, newState) { return fals.. props & state props read only 컴포넌트 안에서 외부에서 전달된 props의 값을 바꾸는 것은 금지돼 있다. state 수정 할 때는 setState로 바꾼다. state 가 바뀌면 다시 랜더링된다. 참고 https://velog.io/@jeromecheon?tag=React State and Lifecycle React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개합니다. Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배웁니다. 이 컴포넌트는 스스로 타이머를 설정할 것이고 매초 스스로 업데이트 할 것입니다. class Clock extends React.Component { render() { return ( Hello, World It is {this.props.date.toLocaleTimeString()}. ); } } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000);render 메소드는 업데이트가 발생할 때마다 호출되지만, 같은 DOM 노드로 .. Components와 Props 컴포넌트를 통해 UI 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 함수 컴포넌트와 클래스 컴포넌트 함수 컴포넌트 JavaScript 함수로 작성 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다. 클래스 컴포넌트 ES6 class 사용 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일합니다. 컴포넌트 렌더링 React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다. const element = ; React가 사용자 .. 이전 1 다음
