React 수명 주기:개요

React의 수명 주기는 마운트, 업데이트 및 마운트 해제의 세 가지 단계로 생각할 수 있습니다. 탑재는 React 구성 요소가 DOM(Document Object Model)으로 렌더링될 때 발생합니다. 해당 구성 요소가 변경되면 업데이트 단계에 들어갑니다.

수명 주기의 업데이트 단계에서 일련의 내부 메서드가 실행되어 새 정보를 확인하고 해당 구성 요소를 다시 렌더링합니다. 마운트 해제는 구성 요소가 DOM에서 제거될 때 간단합니다.

이 기사의 과정에서는 수명 주기의 광범위한 의미와 일반적으로 사용되는 몇 가지 방법에 대해 설명합니다. 여기에서 논의하지 않을 더 많은 수명 주기 방법을 사용할 수 있습니다. 다른 수명 주기 방법에 대한 자세한 내용은 이 소개를 참조하세요.

리액트 라이프사이클이란 무엇입니까?

구성 요소가 DOM에 로드되면 세 단계 중 첫 번째 단계 또는 수명 주기로 들어갑니다. 이 첫 번째 단계를 마운팅이라고 합니다. 이 단계에서 구성 요소는 원래 정의된 대로 렌더링됩니다. 이제 사용자와 상호 작용하고 두 번째 단계로 들어갈 준비가 되었습니다.

두 번째 단계에서 사용자는 구성 요소와 상호 작용하고 일부 변경을 수행했습니다. 대부분의 경우 사용자가 구성 요소 상태를 변경한 작업을 수행했습니다. 이제 수명 주기의 업데이트 단계에 있습니다.

업데이트 단계에서 React는 변경 사항을 표시하기 위해 구성 요소를 다시 렌더링합니다. 업데이트 단계를 트리거하기 위해 상태를 변경하는 위의 예에서 setState() 메서드가 호출되어 초기 상태를 변경하고 다시 렌더링 프로세스를 시작합니다. setState에 대한 자세한 내용은 이 소개 기사를 읽어보세요.

마지막으로 특정 구성 요소에서 다른 곳으로 이동할 때 DOM에서 해당 구성 요소를 지울 수 있습니다. 이것을 마운트 해제라고 하며 수명 주기의 세 번째 단계입니다. 이 단계는 필수는 아니지만 구성 요소가 많은 앱에 권장됩니다.

일반적인 수명 주기 방법

이제 React 구성 요소의 수명 주기 순서를 살펴보았으므로 몇 가지 일반적인 수명 주기 방법을 살펴보겠습니다. 수명 주기 메서드는 다른 수명 주기 단계에서 호출되는 React 메서드입니다. 일부는 필수이고 일부는 선택 사항입니다. 필수 및 일반적으로 사용되는 선택적 방법을 살펴보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

마운팅

클래스 구성 요소를 마운트할 때 일반적으로 사용되는 첫 번째 선택적 메서드는 constructor()입니다. 방법. 구성 요소의 초기 상태를 직접 선언할 수 있는 것은 생성자 메서드입니다.

class App extends React.Component {
  constructor(props) {
    super(props);
  this.state= {
      currentUser : " "
    }

  }
}

이 예에서는 초기 상태를 현재 사용자의 개체로 설정합니다. constructor() 메서드에는 상용구 super()가 필요합니다. 방법. 기본 생성자 super()에 대한 자세한 내용은 , setState 가이드를 읽어보세요.

우리의 목적을 위해 이 구성 요소가 마운트될 때 아무도 아직 로그인하지 않은 것으로 가정합니다. 사용자가 로그인하려면 로그인 양식이 필요합니다. 이렇게 하면 첫 번째 필수 메서드인 render()가 나옵니다. .

구성 요소를 마운트하는 데 필요한 메서드는 render()입니다. 방법. 클래스 구성 요소가 초기 상태 세트로 구성된 후 다른 구성 요소나 HTML을 렌더링할 수 있습니다.

render(){
    return (
     <LoginForm />
    )
  }

render()의 구문 return 문은 다른 메서드와 약간 다릅니다. 반환 후에 중괄호가 아닌 괄호를 사용한다는 점에 유의하십시오. 여기 return 문에서 LoginForm 구성 요소를 렌더링하고 있습니다.

사용자가 로그인하면 자격 증명에 액세스할 수 있습니다. 작동하는 앱에서 로그인하려면 일치하는 자격 증명을 검색하기 위해 서버에 가져오기 요청이 필요합니다. 수명 주기에 대한 이 소개 기사의 맥락에서 상태를 직접 설정합니다.

이 간단한 예에는 사용자 John이 있습니다. 그는 자신의 비밀번호를 입력하고 로그인 버튼을 누릅니다. 이렇게 하면 서버에 가져오기 요청이 전송되고 서버는 John의 자격 증명으로 응답합니다. 이제 John이 로그인했으므로 그가 로그아웃하기로 결정할 때까지 로그인 상태를 유지하기를 원합니다.

이를 위해 우리는 또 다른 매우 일반적인 선택적 방법인 componentWillMount()를 사용할 수 있습니다. . 이 수명 주기 메서드가 호출되면 구성 요소가 렌더링된 후 실행됩니다. 이것은 우리의 새로운 상태를 설정하기에 좋은 곳입니다.

componentWillMount() {
    this.setState({
     currentUser: "John"
    })
  }

이제 구성 요소를 렌더링한 후 마운트하기 전에 구성 요소의 상태가 현재 John 사용자로 설정됩니다. 페이지를 새로 고쳐도 상태는 John으로 설정되므로 사용자는 로그인 상태를 유지합니다.

seState() 사용 메서드는 또한 우리를 수명 주기의 업데이트 단계로 안내합니다. setState()일 때 가 호출되면 구성 요소가 변경되었음을 React에 알립니다. React는 이제 구성 요소를 다시 렌더링하여 사용자에게 변경된 사항을 표시합니다. 우리의 경우 John이 로그인한 것으로 표시됩니다.

업데이트

수명 주기의 업데이트 단계에는 이 소개의 범위를 벗어나는 몇 가지 선택적 수명 주기 메서드가 있습니다. 변경 사항이 감지되면(일반적으로 setState 사용) React는 필수 render()를 호출합니다. 다시 방법. 그런 다음 구성 요소는 변경 사항을 반영하도록 다시 렌더링됩니다.

마운트 해제

구성 요소 수명 주기의 마지막 단계를 마운트 해제라고 합니다. 여기에서 구성 요소가 DOM에서 제거됩니다. 필수는 아니지만 구성 요소가 많은 앱이 더 효율적으로 수행하는 데 도움이 됩니다.

마운트 해제에는 componentWillUnmount()라는 하나의 선택적 메서드만 있습니다. . 사용자 John은 이제 로그아웃하려고 합니다. 그가 로그아웃 버튼을 클릭하면 componentWillUnmount()를 사용할 수 있습니다. DOM에서 사용자 프로필을 제거합니다.

이 예는 약간 인위적이지만 수명 주기의 각 단계에서 어떤 일이 일어나고 있는지 명확하게 보여줍니다.

class UserContainer extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     currentUser: " "
   }
 }
 componentWillMount() {
   this.setState({
     currentUser: "John"
   })
 }
 
 logout = () => {
  this.setState({
    currentUser: " "
  })
 }

 
 render() {
  if this.state.currentUser === "John" {
  return (
     <UserProfile />
      <button type="button" onclick={this.logout}>Logout</button>
    )

  } else {
    return(
     <button type="button>">Login</button>
    )
  }
 }
}

class UserProfile extends React.Component {
  componentWillUnmount() {
    alert("Logged Out")
  }
  render() {
   return (
    <h1>Welcome back, John!</h1>
   )
  }
}

두 가지 구성 요소가 있습니다. 첫 번째는 UserContainer이며 단순히 구성 요소 UserProfile을 보유합니다. UserProfile은 사용자 정보를 포함합니다.

UserContainer에서 구성 요소를 구성하고 이전과 같이 초기 상태를 설정합니다. 구성 요소는 로그인 버튼으로 매우 짧게 렌더링됩니다. 구성 요소를 마운트하기 직전에 John에 로그인합니다. 이로 인해 React는 구성 요소를 업데이트하고 John의 자격 증명으로 다시 렌더링합니다.

이제 John이 로그인했으므로 UserProfile 구성 요소를 렌더링합니다. 여기에는 John의 모든 사용자 정보가 포함되어 있으므로 John이 로그아웃하는 즉시 DOM에서 제거해야 합니다.

로그아웃 버튼을 클릭하면 단순히 현재 사용자를 빈 문자열의 초기 상태로 되돌리는 로그아웃 기능을 실행합니다. 로그아웃 함수가 setState를 호출하기 때문에 React는 컨테이너 구성 요소를 다시 렌더링합니다. 이제 UserProfile 구성 요소가 표시되지 않으며 사용자가 로그아웃했음을 알리는 팝업 경고가 표시됩니다.

결론

여기에서 다루는 것보다 React 라이프사이클에 더 많은 것이 있습니다. 이 기사의 목표는 몇 가지 간단한 코드 예제와 함께 기본 개념을 소개하는 것입니다. 이제 수명 주기의 개념이 도입되었으므로 공식 React 문서가 더 명확해질 것입니다.

이 가이드와 링크된 추가 기사를 읽은 후에는 이제 React의 수명 주기와 독자적으로 더 깊이 들어갈 수 있는 능력에 대해 이해하게 되었습니다. 프로그래밍의 모든 복잡한 개념과 마찬가지로 일상적인 연습은 세부 사항을 해결하는 데 도움이 됩니다.