주말 할일
이번 주 배운 것 블로깅
(메인페이지)호버 이미지
(메인페이지)백과 통신해서 데이터 가져오기 오늘
(메인페이지) 레이아웃 다시 보기
스테잇 줄일 수 있는 방법 고민
(인스타) 레이아웃
(인스타) 호버 시 내용 보이기
일상로그
오전
위코드
- 등원(9시 00분)
- 회원가입 메인 페이지 호버
오후
개인
- 점심 : 중국집
위코드
- 귀가(10시40분)
총평
- 일단 목데이터로 데이터 가져오는 데 성공!
TIL
이번 1차 프로젝트 회원가입 페이지를 만들면서 첫 설계시 state의 사용을 남용하는 우를 범했는데 리액트 공식문서로 state의 사용에 대해 알아보자!
내 코드
class SignUp extends React.Component {
constructor(props) {
super(props);
this.state = {
userEmail: "",
userPw: "",
userRePw: "",
userName: "",
userNumber: "",
userBirthDate: "",
gender: "여성",
incorrectEmail: false,
incorrectPw: false,
incorrectRePw: false,
incorrectName: false,
incorrectNumber: false,
incorrectBirthDate: false,
incorrectGender: false,
entireCheck: false,
firstCheck: false,
secondCheck: false,
thirdCheck: false,
fourthCheck: false,
};
}관리(제어)하고 싶은 상태값을 모두 state으로 줬다 하지만 리액트의 공식문서를 보면 아래와 같다
만일 여러분이 state의 개념에 익숙하다면, 정적인 버전을 만들기 위해서는 state를 절대 사용하지 마세요. State는 데이터가 몇번이고 변경되는 상호작용성을 위해서 사용되는 것입니다. 앱의 정적인 버전을 만들기 때문에 state는 필요 없습니다.
앱을 올바르게 빌드하기 위해, 여러분의 앱이 필요로 하는 변화하는 상태의 최소한의 세팅을 생각해보아야 합니다. 여기서의 키 포인트는 DRY:Don't Repeat Yourself(스스로 반복하지 마세요)입니다. 여러분의 어플리케이션이 필요로 하며 여러분이 필요로 하는 모든 것을 계산하는 절대적이고 최소한의 상태를 알아내세요. 예를 들면, 만일 여러분이 TODO 리스트를 만든다면, TODO 아이템들의 배열을 갖고 있으세요. 그리고 count를 위한 별개의 상태 변수를 갖고 있지 마세요. 대신에, TODO count가 필요할 때는 그냥 TODO 아이템 배열의 length를 가져오시면 됩니다.
하나하나 훑어보고 어떤 것이 상태가 되어야 하는지 알아봅시다. 간단하게 각각의 데이터에 대해 3가지 질문을 던져봅시다.
1) 부모의 props를 통해 온 데이터 인가요? 그렇다면, state가 아닙니다.
2) 시간이 가도 변화하지 않는 데이터인가요? 그렇다면, state가 아닙니다.
3) 여러분의 컴포넌트에서 다른 state나 props를 기반으로 계산할 수 있나요? 그렇다면, state가 아닙니다.
내가 설정한 수많은 state값들 특히 단순히 불리언을 반환하는 state값들은 state으로 설정하는 것을 피해야 한다!
하나의 예시로 어떻게 바꿀 수 있는 지 보자!
변경 전 코드
checkingPw = (e) => {
const { userPw } = this.state;
userPw === e.target.value
? this.setState({ incorrectRePw: false })
: this.setState({ incorrectRePw: true });
};
(...)생략
<div className="fieldRow">
<input
className="infoBox"
type="password"
placeholder="비밀번호 (영문/숫자/특수문자 조합 8자이상)"
id="pw"
onKeyUp={this.handleInput}
onChange={this.handlePw}
></input>
<span className={incorrectPw ? "warningText" : "hidden"}>
영문/숫자/특수문자 조합 8~16자 조합으로 입력해주세요.
</span>
</div>변경 후 코드
checkingPw = () => {
const { userPw, userRePw } = this.state;
return userRePw.length === 0 || userPw === userRePw;
};
<div className="fieldRow">
<input
className="infoBox"
name="userRePw"
type="password"
placeholder="비밀번호 입력 확인"
onKeyUp={this.handleInput}
></input>
<span
className={this.checkingPw() ? "hidden" : "warningText"}
>
입력값이 일치하지 않습니다
</span>
</div>비밀번호가 맞는지 틀린지 체크하는
checkingPw는 단순 참과 거짓을 반환하기 위한state으로 굳이 state으로 관리하지 않고 함수에서 바로 불리언을 반환해서 사용할 수 있다 !
