리액트의 기본이라고 할 수 있는 props와 state에 대해서 공부했어연ㅎㅎ
간단히 설명하면,
-
props는 어떤 컴포넌트에서 다른 컴포넌트에게 data를 전달할 때 사용하는 data라고 하며, 불변이고 읽기 전용이다. type은 데이터 타입과 같다. spread operator로 전달 가능하다.
-
state는 컴포넌트 내에서 사용하는 data이며 setState로 수정 가능하며, 매서드를 사용한 직접수정은 불가하다. state는 캡슐화가 되어있어 , props로 전달하지 않는 이상 다른 컴포넌트에게 영향을 끼칠 수 없다. state가 변하면 리액트는 재랜더링되며, setState로 state를 변경하면 직접적으로 바뀌는게 아니라, 브라우저에게 요청하고 브라우저가 해당 함수나 코드를 호출해 화면에 보여지게 되는 것이다.
-
state를 효율적으로 사용하기 위해서는 리액트의 라이프사이클에 대해서 알아야 한다. 왜냐면 state가 바뀔때마다 reRendering 되므로, 라이프 사이클의 매서드를 통하여 불필요한 랜더링을 막을 수 있기 때문이다.
리액트 컴포넌트의 라이프사이클
모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있다.
자주 사용하는 메서드는 componenetDidMount()나 componentWillUnmount() 이다. componentDidMount()에서 이벤트를 등록하고 componentWillUnmount()에서 이벤트를 해제하는 패턴을 많이 사용합니다.
render()
- render() 매서드는 클래스 컴포넌트에서 반드시 구현되어야 할 유일한 매서드임. 이 매서드가 호출되면 this.props와 this.state의 값을 활용하여 값을 반환함. => state가 바뀌거나, 바뀐 state를 props로 전달해줄 때 render()됨.(리랜더링 됨.)
- render()함수는 순수 함수여야 하며, 브라우저와 직접 상호작용을 하지 않는다. (랜더 함수는 보여주기만 함.)
- 브라우저와 상호작용이 필요하다면 (ex. ajax 통신 등) componentDidMount() 나 useEffect 매서드를 사용해야 한다.
render() 함수(Hooks는 return)는 아래 5가지 중 한가지를 반환한다.
- React Element : html element, JSX
const Eunsu= () => {
return <h1>Beautiful!</h1>
}
export default class TestLifecycle extends React.Component{
render(){
return(
<>
<Eunsu />
</>
)
}
}- 배열,Fragment
const users= ['Bob','John','Julie','Lazy','Rin'];
export default class TestLifecycle extends React.Component{
render(){
return(
<>
{
users.map(user => <h1>Welcome {user}</h1>)
}
</>
)
}
}- Portal
const Parent= ({children}) => {
return (
<div>
{children}
</div>
)
}
export default class TestLifecycle extends React.Component{
render(){
return(
<>
<Parent>
<h1>Welcome Guys!</h1>
</Parent>
</>
)
}
}- String and Number
const string= "This is String",
number= 10;
export default class TestLifecycle extends React.Component{
render(){
return(
<>
{string},{number}
</>
)
}
- Boolean, null
const target= null;
export default class TestLifecycle extends React.Component{
render(){
return(
<>
{target !== null && <h1>target is null</h1>}
{target == null && <h1>target is null</h1>}
</>
)
}
}결과값이 false이면 아무것도 출력하지 않음. 이것을 3항 연산자로 사용해서 JSX에서 사용할 수 있음.
componentDidMount()
- 컴포넌트가 마운트 된 직후, 즉 트리에 삽입된 직후 호출됨. (리랜더링 되면 실행됨) DOM노드가 있어야 하는 초기화작업을 해야할 때 이 매서드를 사용해 실행한다. 데이터, 네트워크 요청 등을 보내기 좋은 위치이다.
- componentWillMount와 다른점은 server-sideRendering시에 호출되지 않는 점이다. 서버사이드랜더링이 일어나지 않는다는 의미는 비동기적인(ajax 통신, setInterval 등) 것들은 일어나지 않는다는 것을 의미한다.
서버사이드 랜더링이란?
서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미한다. 이 경우 render()가 두 번 호출되지만, 사용자는 그 중간 과정을 볼 수 없다. 이럴 경우 성능 문제로 이어지기 쉬우니, 초기 state값에 저장해 주는것이 좋다.
state변경 -> 브라우저에 변경된 사항 요청 -> 브라우저 응답 -> 화면에표시(서버사이트 랜더링)
componentDidUpdate(prevProps, prevState)
갱신이 일어난 직후에 호출. 이 메서드는 최초 렌더링에서는 호출되지 않는다.(state가 변경될때) DOM의 변화에 hook 하여 또 다른 작업을 하고 싶을 때 사용할 수 있다.
componentWillUnMount()
컴포넌트가 DOM에서 삭제될 때 호출된다. 이벤트 해제 같은 clean-up 처리 시 할 때 사용한다. ComponentDidMount()에서 등록한 Timer의 처리나 DOM의 이벤트 등은 여기에서 해제해야 한다.
출처 / 참조
