나의 React 여정: 26일차

라이프사이클 방법 및 조건부 렌더링

오늘은 내 React 학습 여정의 또 다른 단계로, 수명 주기 방법과 조건부 렌더링에 관한 것입니다. React 구성 요소가 어떻게 탄생하고, 성장하고, 결국 DOM을 떠나는지 이해하는 것은 나에게 게임 체인저였습니다. 여기에 사용자 상호 작용을 기반으로 조건부로 콘텐츠를 표시하는 기능을 추가하면 갑자기 동적이고 사용자 친화적인 앱을 구축하는 것이 정말 즐거워집니다!

React 기능 구성 요소의 수명 주기 메서드
수명 주기는 3단계로 구성됩니다.

1.초기 단계(마운팅 단계):

• 구성요소가 처음으로 렌더링될 때 발생합니다.
• 빈 종속성 배열([])이 있는 useEffect는 이 단계에서만 실행됩니다. 예:

useEffect(() => {
  console.log("Component mounted");
}, []);

2.업데이트 단계:

• 상태나 소품이 변경되면 트리거됩니다.
• React는 함수 구성 요소를 다시 실행하고 상태를 다시 계산하고 업데이트된 props를 전달합니다.
• 변경 사항을 처리하려면 특정 종속성과 함께 useEffect를 사용하세요.

useEffect(() => {
  console.log("State or props updated!");
}, [dependency1, dependency2]);

3. 종료 / 마운트 해제 단계:

• 구성요소가 DOM에서 제거될 때 발생합니다.
• useEffect의 반환 함수에 정리 코드를 추가하여 메모리를 해제할 수 있습니다. 예:

useEffect(() => {
  const handleResize = () => console.log("Resized!");
  window.addEventListener("resize", handleResize);

  return () => {
    window.removeEventListener("resize", handleResize);
    console.log("Component unmounted, cleanup done!");
  };
}, []);

조건부 렌더링

이 기술은 조건에 따라 구성 요소나 요소를 동적으로 렌더링하는 데 필수적입니다.

삼항 연산자
사용자 인사말 예:

return props.isLoggedIn ? (
  <h2 className='welcome-message'>Welcome {props.username}</h2>
) : (
  <h2 className='login-prompt'>Please log in to continue</h2>
);

단락평가
더 간단한 조건의 경우 조건이 true인 경우에만 &&를 사용하여 구성 요소를 렌더링할 수 있습니다.

return props.isLoggedIn && <h2>Welcome, {props.username}</h2>;

인라인 조건부 스타일
구성 요소의 스타일을 동적으로 지정할 수도 있습니다.

const messageStyle = props.isLoggedIn
  ? { 색상: "녹색" }
  : { 색상: "빨간색" };

<h2> 반환



</h2><p><em>나날이 좋아지고 있어요</em></p>


          

            
        

위 내용은 나의 React 여정: 26일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!