[November 16] 논리 AND 연산자 && 를 사용하여 조건부 렌더링

논리 AND 연산자 && 를 사용하여 조건부 렌더링하기

아래와 같은 오류가 발생했다.

오류메시지를 보면 "Cannot read properties of null (reading 'nickName')"이라고 나오는데, 이는 어떤 부분에서 null 값인 객체의 nickName 속성에 접근하려고 시도하고 있다는 것을 나타낸다.

ERROR Cannot read properties of null (reading 'nickName') 
...

이유

: 오류가 발생하는 부분은 clickedLetter가 null일 때인데,  클릭된 펜레터가 없는 상태에서 해당 부분을 렌더링하면서 발생하였다.

 

오류가 발생한 부분

letter detail 영역에서 클릭된 펜레터 정보를 보여주는 부분이 오류가 발생하는 부분이었다.

<div>
  <h2>{clickedLetter.nickName}</h2>
  <h2>{clickedLetter.postTime}</h2>
</div>
<p>{clickedLetter.member}</p>
<p>{clickedLetter.content}</p>
<div>
  <button>수정</button>
  <button onClick={handleDeleteLetter}>삭제</button>
</div>

 

해결 방법

: clickedLetter가 null인 경우에는 해당 부분을 렌더링하지 않도록 처리하는 것이다. 조건부 렌더링을 사용하여 수정할 수 있다.

 

오류가 발생하는 부분을 아래와 같이 수정 하였다.

<div>
        {clickedLetter && (
          <div style={{ border: "1px solid #111", padding: "10px" }}>
            <div>
              <h2>{clickedLetter.nickName}</h2>
              <h2>{clickedLetter.postTime}</h2>
            </div>
            <p>{clickedLetter.member}</p>
            <p>{clickedLetter.content}</p>
            <div>
              <button>수정</button>
              <button onClick={handleDeleteLetter}>삭제</button>
            </div>
          </div>
        )}

논리 AND 연산자 (&&)는 두 개의 피연산자가 모두 참일 경우에만 결과가 참이 되는 연산자이다.

조건부 렌더링에 &&를 활용하면, 객체나 변수가 존재하는지 확인하고 해당 객체나 변수를 사용할 수 있다.

위 코드에서 clickedLetter && (...)는 clickedLetter가 존재할 경우에만 괄호 안의 부분을 렌더링하라는 의미이다.

만약 clickedLetter가 null이거나 undefined일 경우 렌더링되지 않는다.

 

 

클릭한 멤버의 이름과 전체 팬레터 중에서 member 키 값의 value가 일치하는 팬레터만 필터링 하는 부분

  const showLetters = (clickedMember) => {
    setMemberFiltering((prev) => {
      const updatedFiltering = Object.fromEntries(
        Object.entries(prev).map(([member]) => {
          return [
            member, // 이부분이 key가 되고
            member === clickedMember, // 얘는 불린값으로 반환
          ]
        })
      );
      return updatedFiltering;
    });
    
  };