어제는 리액트의 가장 대표적인 기능 components를 이용해서 하나의 페이지를 2개의 페이지로 구현했다.

게시물 등록하기 페이지를 수정하기 페이지와 같이 구현하도록 했다.

오늘은 페이지 이동시 default value 값 설정에 대해서 배웠다.

default value?

default value란 기본값 설정을 의미하는데 예를들면 이런것들이다.

물품 등록하기를 이용해서 위 게시글과 같은 페이지를 만들었다.

이제 이물품 수정을 하려고 하는데 수정하기 페이지에 제목, 내용등 게시글의 내용을 가져와서 보여주는 것이다.

default value를 지정하면 기본값을 보여줄수 있다.

위 사진처럼 게시글 수정시 작성자, 제목, 내용 등 기존에 있었던 내용들을 불러와서 그려줄수 있다.

default value 구현의 2가지 방법

1. default value를 state 값에 직접 넣어주기
2. 변화가 생긴 부분만 업데이트 하기

1번 방법은 모든값에 직접 넣어주고 범용성이 떨어져서 주로 2번 방법을 많이 사용한다고 한다.

default value 설정

1. variables 수정
2. present 파일 default value 바인딩

게시물 상세페이지에서 수정페이지로 이동할때 default value 설정을 하려면 2가지의 설정변경이 필요하다.

default value - variables

먼저 물품 수정버튼에 updateBoard 기능을 통해 variables 작성을 했었는데 이부분 변경이 필요하다.

기존에는 위에처럼 variables를 작성했다면 default value를 설정하려면 다음과같이 약간의 수정이 필요하다.

먼저 variables를 myVariables라는 변수에 담아준다.
그리고 default value를 설정할 title, contents 부분을 다음과 같이 수정한다.

기존코드

updateBoardInput : {
	title: name,
    contents: contents
}

변경코드

updateBoardInput:{
	title: data.fetchBoard.title,
    contents: data.fetchBoard.contents
}

기존에는 variables를 보자면
title 부분에는 name 이라는 스테이트값을 contents에는 contents라는 스테이트 값을 넣어줘

이런 의미였다면

변경 variables는

title에는 fetchBoard 에있는 title 값 이런식으로 해석할수 있다.
이렇게 default value 설정이 필요한 부분에 fetchBoard data를 지정해주고 변수에 담아준다.

이제 if문을 사용해서 변경되었을때만 업데이트 하도록 설정한다.

if (title) myVariables.updateBoardInput.title = title;
if (contents) myVariables.updateBoardInput.contents = contents;

if문을 해석해 보자면 title이 myvariables와 updateBoardInput에 있는 타이틀값과 같다면 title내용을 기재한다

이런 내용인거 같다.

이부분은 설명을 제대로 듣지못해서 아직 정확히 이해하지 못했는데 멘토님에게 물어봐야 할듯하다.

default value 바인딩

variables 설정이 끝나고 나면 바인딩을 시켜준다.

defaultValue = {props.data?.fetchBoard.title}

이런식으로 defaultValue 설정부분에 작성해주면 해당부분에 default value가 페이지에 그려진다.

default value 작성시 중요한점은 variables 설정을 잘해야 한다.
작업중 default value는 받아오는데 업데이트가 안되서 4시간정도 문제해결이 안되었는데

if (contents) myVariables.updateBoardInput.contents = contents;

이부분을 if(contents) myVariables.contents 이렇게 updateBoardInput을 생략하고 작성해서 계속 default value만 나왔었다.

최근 배운내용을 계속 반복해서 사용하고 있지만 가장 오류가 많이나고 아직 이해가 잘 안되는 부분은 variables 작성쪽인것 같다.

한번더 강의내용을 보고 이해한뒤 최대한 많이 써봐야 할거 같다.