TIL 13

go__rAnii·2022년 1월 26일

TIL

목록 보기

13/35

input tag의 defaultValue vs value

input tag의 속성으로 value를 주게 되면 onChange 등의 이벤트로 별도의 속성을 주지 않는 이상 value의 값이 고정으로 보여진다.
defaultValue도 해당 태그의 위치에 값을 보여주는 점은 value와 같지만 태그에 들어있는 값이 가변적이라는게 다른 점이다.

또한 하나의 태그에 value와 defaultValue가 함께 사용될 경우 value에 해당하는 값만 보여지고 defaultValue는 보여지지 않는다.

.map method를 사용해 뿌려진 presenter의 state 값

{props.data?.fetchBoards?.map((el, index)=>(
                <JH.ContentsLine>
                    <span>{<input type='checkbox'/>} </span>                
                    <JH.ContentsLineWriter>작성자: {el.writer}</JH.ContentsLineWriter>
                    <JH.ContentsLineTitle id={el._id} onClick={props.onClickToBoard}>제목: {el.title}</JH.ContentsLineTitle>
                    <JH.ContentsLineLike>좋아요: {el.likeCount}</JH.ContentsLineLike>
                    <JH.ContentsLineTime>작성일: {el.createdAt}</JH.ContentsLineTime>
                   
                </JH.ContentsLine>
                
            ))}

위 코드는 실행시 fetchBoards를 통해 게시판 목록을 불러오고 한 페이지에 최대 10개의 게시글을 .map을 통해 뿌려준다.
이 경우 코드는 하나의 컴포넌트이지만 실제로 사용되어져서 브라우저에서 보여지는 컴포넌트는 10개이다.

이렇게 뿌려진 10개의 컴포넌트를 동시에 수정해야 한다면?
컴포넌트는 메소드에 의해 10개로 나뉘어 보여지지만 컴포넌트들이 사용하는 state 변수는 한개만 선언되어 있으므로 1번과 2번 컴포넌트를 동시에 수정하게 되면 1번에 적힌 값이 2번에도 동시에 같은 값으로 적용되어 수정이 불가능할 것이다.

물론 state-1, state-2, ... , state-10 이런 식으로 갯수에 맞게 state를 선언해서 컴포넌트 마다 할당해주면 문제를 해결할 수 있으나 코드가 난잡해지는 것은 감수해야 한다.

이런 문제점은 생각보다 간단하게 해결이 가능한데, 위 코드에서 태그 부분을 새로운 페이지의 컴포넌트로 만들어서 임포트한 후 사용해주면 깔끔한 코드와 정확한 작동을 얻을 수 있다.

// component 작성
export default function CommentList(){
const [state, setState]=useState()

return(
	<JH.ContentsLine>
                    <span>{<input type='checkbox'/>} </span>                
                    <JH.ContentsLineWriter>작성자: {el.writer}</JH.ContentsLineWriter>
                    <JH.ContentsLineTitle id={el._id} onClick={props.onClickToBoard}>제목: {el.title}</JH.ContentsLineTitle>
                    <JH.ContentsLineLike>좋아요: {el.likeCount}</JH.ContentsLineLike>
                    <JH.ContentsLineTime>작성일: {el.createdAt}</JH.ContentsLineTime>
        </JH.ContentsLine>
        )            
}

//작성한 component를 import
{props.data?.fetchBoards?.map((el, index)=>(
                <CommentList />
                
            ))}

이처럼 컴포넌트를 별도에 페이지에 작성하고 해당 페이지에서 쓸 html태그와 state를 선언한 다음 실제로 적용할 .map 메소드 내부에 임포트 해주면 이전에 합쳐져있던 코드와 같이 10개의 컴포넌트가 map에 의해 작성이 되어 뿌려지고 export하고있는 컴포넌트에서 선언된 state에 의해 뿌려진 10개의 컴포넌트가 각자 하나의 state를 사용할 수 있게 된다.

이렇게 코드를 사용하면 컴포넌트를 효율적으로 관리할 수 있을 뿐아니라 유저의 입장에서도 부담이 덜한데, 랜더링이 최적화 되기 때문이다.