[TIL] 2021 11 29 - 실전 프로젝트 6주차

오늘 한 일

react에서 textarea 글자 수 제한하기

• 게시글 작성할 때 onChange가 일어날때마다 글자수를 세어서 최대 글자수를 제한해주는 로직을 작성했다.

// 글자수 제한 함수
  const checkTextLength = (e, maxLength, setLength) => {
    let targetText = e.target.value;
    let textLength = e.target.value.length;

    if (textLength <= maxLength) setLength(e.target.value.length);
    else {
      e.target.value = targetText.substr(0, maxLength);
      setLength(maxLength);
    }
  };

아래는 구현한 화면이다. 입력한 글자수대로 {length}/100에서 length 상태를 업데이트시켜주도록 했다.

textarea 태그안에는 자식태그를 넣을 수 없기 때문에, 바깥에 div로 감싸서 안에 p, textarea태그를 넣어서 마치 textarea처럼 보이게 컴포넌트를 구성했다.

react에서 drop box 만들기

• 유저 피드백으로 받은 카페왕의 단점 중에서 카페 위치를 정확히 알 수 없다, 위치별 카테고리나 검색이 있었으면 좋겠다. 라는 피드백이 많았다. 시간상 내일부터는 발표준비를 해야할 것 같아서 지도를 넣거나, 추가적인 위치기반 서비스를 넣기에는 무리가 있다고 판단하였고, 그 대신 카페후기 작성시에 드롭박스로 전국에 도시를 선택할 수 있도록 해서 검색할 때 그 도시를 검색하면 결과가 나오도록 수정하기로 하였다.
  원래는 사용자가 위치를 마음대로 작성하는 식이였기 때문에 좀 더 정확한 주소지를 필터링해서 보여주고자 했다.
  게시글 CRUD는 내가 맡았던 부분이여서, 내가 맡기로 했다.
  모달을 구현하는 것과 비슷하게 구현했다.

        // 드롭다운 state
          const [isDown, setIsDown] = useState(false);
          const [region, setRegion] = useState(isRegion);
 			
			...
            
	  <LocationBox>
            <DropDownBox>
              {isEdit ? (
                !isDown && !region ? (
                  <SelectText>{isRegion}</SelectText>
                ) : (
                  <SelectText>{region ? region : isRegion}</SelectText>
                )
              ) : (
                <SelectText>{region ? region : "지역 선택"}</SelectText>
              )}
              <DropDownIcon
                style={{ cursor: "pointer" }}
                onClick={() => {
                  setIsDown(!isDown);
                }}
              />
            </DropDownBox>

            <TextInput
              height="48px"
              width="calc((100% / 3) * 2)"
              border="1px solid #999"
              padding="14px 16px"
              borderNone
              ref={locationRef}
              onChange={(e) => {
                checkTextLength(e, 100, setLocationLength);
                setPost({ ...post, location: e.target.value });
              }}
              placeholder="카페 위치 (ex. 홍대 어딘가)"
              value={
                post && post.location
                  ? post.location.substr(
                      post.location.indexOf(" ") + 1,
                      post.location.length
                    )
                  : ""
              }
            />
          </LocationBox>
        )}
        {isDown && (
          <RegionListBox>
            {regionList.map((r) => (
              <Region
                key={r}
                onClick={() => {
                  setRegion(r);
                }}
              >
                {r}
              </Region>
            ))}
          </RegionListBox>
        )}

해결한 문제

• request 데이터를 보낼 때는 "시도" + "상세위치" 를 같이 보내주고, 수정시에는 두 개를 나눠서 하나는 드롭박스안에, 하나는 textarea 안에 넣어줘야해서 여기서 시간이 좀 걸렸던 것 같다.
  -> 자바스크립트 문자열 내장 메소드를 사용해서 해결했다. substr, indexOf

• 수정모드일 때 원래는 post.location.split(" ")[0] 이런 식으로 받아온 위치정보를 바로 보여줬는데 이렇게 하니까 location을 수정하면 onChange이벤트가 발생하면서, 드롭박스 안에 있는 위치정보도 바뀌게 되는 문제가 생겼다.
  -> 아래 코드에서 처럼, region state의 초기 상태값을 수정모드 일 땐post.location.split(" ")[0]로 지정하고, 아닐 땐 null로 지정해줘서 location이 변해도 영향을 받지 않도록 해주었다.

  const isRegion = isEdit && post ? post.location.split(" ")[0] : null;

  // 드롭다운 state
  const [isDown, setIsDown] = useState(false);
  const [region, setRegion] = useState(isRegion);