[Archives] State Toggle

📚 기록, State로 댓글 Toggle 기능을 만들어보자.

자유게시판 포트폴리오를 만드는 도중 직접 구현했던 댓글 toggle 기능을 기록해두고자 한다.
수정 아이콘을 클릭하면 기존 댓글의 값을 defaultValue로 가져오는 수정 창이 나오고 취소 버튼을 클릭하면 다시 원래의 댓글 리스트가 나오게 만들었다.

1. 배열 사용하기

isActiveArr라는 state에 댓글의 data.length 만큼의 길이의 빈 배열을 담아주고 fill()을 사용하여 값을 전부 false로 담아주었다.

JSX 코드

export default function BoardComment() {
	const [isActiveArr, setIsActiveArr] = useState([]);

	const onClickEditBtn = (index: any) => {
		const arr = new Array(data.fetchBoardComments.length).fill(false);
		arr[index] = true;
		setIsActiveArr(arr);
	};
	const onClickCancelBtn = (index: any) => {
		const arr = new Array(data.fetchBoardComments.length).fill(false);
		arr[index] = false;
		setIsActiveArr(arr);
	};

  return(
 
    // isActiveArr의 index가 false이면 보이도록 조건부 렌더링
  	{props.isActiveArr[index] || (
    // 댓글 리스트 JSX 작성
  )}
	// isActiveArr의 index가 true이면 보이도록 조건부 렌더링
	{props.isActiveArr[index] && (
      // 댓글 수정 JSX 작성
  )}
}

2. 댓글 리스트를 컴포넌트로 따로 분리하기.

fetchBoardComments로 받아온 data를 map()을 사용하여 리스트를 작성할 때, map()의 안쪽 내용을 분리하여 import 해주면 각각의 댓글 마다 state를 따로 적용해줄 수 있다!

CommentListItem JSX 코드

export default function CommentListItem(props) {
	const [isEdit, setIsEdit] = useState(false);
 	
  	const onClickEditBtn = () => {
		setIsEdit(!isEdit);
	};
 
  	// isEdit의 boolean 타입에 따라 렌더링 될 수 있도록 삼항연산자 사용
  	{!props.isEdit ? (
    	// 댓글 리스트 JSX 작성
    ) : (
    	// 댓글 수정 JSX 작성
    )}
}

CommentListUI JSX 코드

export default function CommentListUI(props) {
	return (
    	<S.CommentListBox>
      		{props.data?.fetchBoardComments?.map((el: any, index: number) => (
                // map() 안쪽에 import 해준다.
      			<CommentListItem
					key={el._id}
					el={el}
				/>
            ))}
         </S.CommentListBox>
    )
}

💖 마무리

배열을 활용해서 index의 boolean 값에 따라 리스트와 수정 창이 toggle 되도록 구현해보았다. 직접 구현하면서 과연 안정성이 높은 코드인지 장시간 고민했었지만 마땅한 해결방법이 생각나지 않아 마무리 했었다. map()의 안쪽에도 컴포넌트를 import 해줄 수 있으며 컴포넌트를 따로 분리하면 state가 독립적으로 적용된다는 것을 배우게 되었고 더욱 안정적이고 효율적인 코드로 리팩토링할 수 있었다! 직접 구현해보았던 방식을 잊지 않기 위해 기록해둔다.