TIL 23.11.23 리액트 팀 프로젝트 -3- UseState 로 토글 만들기

오늘도 여전히 팀 프로젝트 진행중이다

목표는 금요일까지 모두 마무리이지만 아직 한참 멀었다

에딧버튼을 누르면 수정하는 화면으로 바꾸는 토글을 사용했는데

const [isEditing, setIsEditing] = useState(false);

  const handleEditToggle = () => {
    setIsEditing(!isEditing);
  };

 

 

간단하게 요약하자면 삼항연산자 버튼을 눌러서 핸들링토글이 작동하면 isEditing을 true 바꿔주고

{isEditing ? (
            <input type="text" value={User.mbti} onChange={(e) => console.log(e.target.value)} />
          ) : (
            <p>MBTI: {User.mbti}</p>
          )}
        </NicknameAndData>
      </UserInfo>

      {isEditing ? <></> : <EditProfile onClick={handleEditToggle}>Edit profile</EditProfile>}
      {isEditing ? <EditProfile onClick={handleEditToggle}>수정완료 </EditProfile> : <></>}

      <div style={{ display: isEditing ? 'none' : 'block' }}>{User.mbti}</div>

 

값이 ture값으로 바뀌면 삼항 연사자 처럼 isEditing ? (트루일 경우 보여지는값 : false일경우 보여지는값)

아래에있는 버튼 도 똑같이 적용해서 수정 전 완료버튼 2개를 다르게 보이게했다

아래에 ESFP가 보여지고 안보여지고를 스타일 값으로 부여했다 아래사진을 확인하면 훨씬더 알아보기가 쉽다

none 일때 block일때

 

저녁에는 각자의 결과물들을 푸쉬 머지하는 시간을 가졌는데

어제 겪었던 오류가 비슷하게 나서 머지가 안되는 상황이 발생했다

역시나 문제는 패키지 매니저가 (npm,yarn)2개가 돌아가고있었고 yarn.lock페이지에서 수정후에 무사히

머지를 할수있었다 조만간 패키지 매니저도 통합해야할듯하다