REACT 6
REACT Tutorial Beginners
블로그 내용은
Programming with Mosh React Tutorial for Beginners [React js]
을 공부하는 과정에서 작성되었습니다.
Stateless Functional Components
컴포넌트를 클래스로 작성하는 법을 배워봤으니 이제 함수형 컴포넌트를 배워봅시다.
const Navbar = (props) => { return ( <nav className="navbar navbar-light bg-light"> <div className="container-fluid"><a className="navbar-brand" href="#"> Navbar{" "}<span className="badge badge-pill badge-secondary">{props.totalCounters}</span></a> </div> </nav> ); } export default Navbar;
클래스 컴포넌트와 다르게 함수 컴포넌트에서는 this.props를 사용하지않고 컴포넌트에 인자로 줍니다. render도 생략할 수 있습니다.
Destructing Arguments
우리가 작성한 코드에 this와 props가 덕지덕지 붙어 있습니다. 가독성을 높이고 코드를 작성할 때 편리함을 높이기위해서 다음과 같이 작성할 수 있습니다.
const Navbar = ({totalCounters}) => { return ( // <span className="badge badge-pill badge-secondary">{totalCounters}</span></a> // ); } export default Navbar;
우리는 앞서서 키와 밸류가 같으면 {totalCounters}와 같이 작성할 수 있다고 배웠습니다. 위 코드는 하나의 props만 존재하기 때문에 컴포넌트 함수의 인자를 {totalCounters}로 바꿔줄 수 있습니다. Counters 컴포넌트에는 props가 많았는데요. 확인해 봅시다. 다음과 같이 작성해 추가하면 됩니다.
const onReset = this.props.onReset ; const counters = this.props.counters; const onDelete = this.props.onDelete; const onIncrement = this.props.onIncrement;
근데 길어도 너무 길죠. 리액트에는 어울리지 않는 방법입니다. 리액트에 이름이 같을 경우 const { onReset } = this.props;과 같은 형태로 축약이 가능하다고 했습니다. 그리고 자바스크립트 문법에는 Destructing Arguments가 있어서 아래 코드와 같이 사용할 수 있습니다.
render() { const { onReset, counters, onDelete, onIncrement } = this.props; return(//)
위 코드를 추가하고 return에 있는 this.props.를 제거해줍시다.
Lifecycle Hooks
Mounting phase
맨 처음으로 MOUNT를 살펴봅시다.
1. constructor
우리가 코딩을 하면서 this를 많이 사용했습니다. this는 원래 super()을 필요로 합니다. 그리고 super()은 construtor가 있어야지만 호출할 수 있습니다.( 리액트에서는 React.Component)
constructor(){
super();
ex))this.state = this.props.~~;
}위와 같이 생성자 안에서 state를 초기화할 수 있습니다 setState는 render안에서만 작동함으로 생성자에서 사용할 수 없습니다.
constructor(props){
super(props);
ex)) this.state = this.props.~~
;
}
여기서 중요한 점은 위와 같이 인자로 props를 넣어줘야만 올바르게 생성자가 작동한다는 것 입니다.
지금은 클래스 필드를 지원하기 때문에 앞서 우리가 사용한 방법 그대로 작성해도 괜찮습니다.
2. componentDidMount
componentDidMount()는 컴포넌트가 render된 이후에 호출됩니다. 이 메서드는 서버로부터 데이터를 받아올 수 있는 메서드입니다. 그렇기 때문에 보통 Ajax통신을 할때 많이 사용되는 메서드 입니다.
3. render
앞서서 계속 살펴봤지만 html요소를 눈으로 그리는 것을 '렌더링'한다고 합니다.
render()의 특징은 컴포넌트가 render되면, 자식 컴포넌트는 전부 re-render합니다. 또 하나 알고 넘어갈 부분은Stateless Functuional Component는 lifecycle hooks를 사용하지 않습니다.
Updating Phase
1. componentDidUpdate()
update에서는 props나 render이 변경될 경우 다시 한 번 render을 호출합니다. 이것은 모든 자식들이 다시 render된다는 뜻입니다. 그런데 변경할때마다 그러면 모든 엘레먼트들이 다시 render될까요? 아닙니다. render은 props가 변경되었을 때 변화하는 부분의 엘리먼트만 업데이트 시킵니다.
그렇기때문에 Ajax와 같은 네트워크와 통신을 할 때 좋습니다. props가 변경됐을 경우만 통신을 하면 최적화된 통신이 가능하겠죠?
componentDidUpdate(prevProps) { // 전형적인 사용 사례 (props 비교를 잊지 마세요) if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }
Unmounting
1. componentWillUnmount()
마지막으로 Unmounting입니다.
//Counter componentWillUnmount(){ console.log("Unmount"); }
counter컴포넌트에 componentWillUnmount를 추가하고
브라우저로 돌아가 Delete버튼을 누르면 Unmount가 출력되는 것을 확인할 수 있습니다.
componentWillUnmount메서드는 Dom에서 마운트 해제되기 직전에 호출되는 메서드입니다.
이 메서드는 타이머 제거, 네트워크 요청취소 등 작업을 수행합니다.
강의 공부를 마치며
아직 hooks는 공부를 더 해봐야겠다. 서버와 통신을 해봐야
circle을 이해하고 활용할 수 있겠다. react를 처음 시작하며 많은 걸 배웠다. 앞으로 계속 공부해가며 포스팅 내용도 수정 및 보완해야겠다.
참고자료
https://ko.reactjs.org/docs/react-component.html
https://ko.reactjs.org/docs/getting-started.html
