리액트 팬레터 홈페이지 만들기: 댓글 관리와 글자수 제한 기능 구현

1. 화면

1. 댓글이 없으면 '댓글 없음'을 알려주고 있으면 댓글 보여주기

2. 댓글 등록시 작성자/내용에 최대 글자수 제한주기

2. 코드

(1) 댓글 유무에 따른 화면 구성

  //멤버에 따라 댓글 필터링

    const filteredByMember = comments.filter((comment) => comment.member === member);

    //필터링된 댓글 없으면 '댓글없음 '표시

    if (filteredByMember.length === 0) {

        return (

            <StSection>

                <StP3>{member}의 등록된 팬레터가 없습니다. 댓글을 남겨주세요!</StP3>

            </StSection>

        );

    }

▶ 멤버에 따라 필터링 하고 length로 구분

return (

        <>

            {filteredByMember.map((comment) => {

                return (

                    <StSection key={comment.id}>

                        <Link to={`detail/${comment.id}`}>{comment.member}</Link>

                        <StDiv>

                            <figure>

                                <StImg src={personImg} alt="프로필 사진"></StImg>

                            </figure>

                            <StP>{comment.writer}</StP>

                        </StDiv>

                        <div>

                            <StP2>{comment.content}</StP2>

                        </div>

                    </StSection>

                );

            })}

        </>

    );

▶ 댓글이 있는 경우는 해당 멤버의 댓글 보여주기

 

(2) 작성자/내용 등록시 글자 제한 두기

 <StInput

                        value={writer}

                        placeholder="최대 20글자까지 작성할 수 있습니다."

                        maxLength="20"

                        minLength="2"

                        onChange={(event,maxlength) => {

                            //글자수제한

                            if (event.target.value > maxlength) {

                                event.target.value = event.target.value.substring(0, maxlength);

                            }

                            setWriter(event.target.value);

                        }}

></StInput>

▶ maxLength='20' / minLength: '2' -> 최대길이와 최소길이를 설정함

▶ input type ="text"일 경우 (input의 default값은 text) maxLength만해도 설정 가능 !

▶ 댓글 등록하는 구간 & 수정하는 구간 2곳 모두 수정해야함.

 if (event.target.value > maxlength) {

     event.target.value = event.target.value.substring(0, maxlength);

 }

▶ input type ="number" 일 경우 onChange 이벤트 안에 해당 함수를 넣어줘야한다.

 

끝.