[westagram] 기능 구현 코드

👩‍💻 React로 구현해 본 위스타그램 코드 정리!

로그인페이지

👀 아이디, 패스워드에 특정 조건 걸어주고, 충족시 메인페이지로 이동

this.state = {
      name: "",
      pw: "",
      hiddenPW: true,
    };

---

const {name, pw} = this.state;
const {handleInputValueChange} = this;
<div class="login">
   <div id="input">
      <input id="name" type="text" placeholder="아이디를 입력해 주세요" 
       	     onChange={this.handleInputValueChange}/>
      <input id="pw" type={this.state.hiddenPW ? "password":"text"} placeholder="비밀번호" onChange={this.handleInputValueChange}/>
      <span className="showPw" onClick={this.showPassword}>{this.state.hiddenPW? "Show":"Hide"}</span>
   </div>
   <button id='btnLogin' 
           onClick={this.checkValidation}
           className={activateBtn ? "active" : ""}>로그인</button>

   <div class="findPw">비밀번호를 잊으셨나요?</div>
</div>

우선, input박스에 친 텍스트의 값을 가져와야 한다. input박스에 onChange를 걸고 handleInputValueChange라는 함수를 선언해준다.

handleInputValueChange = (e) => {
const { id, value } = e.target;
this.setState({[id]: value});
}
//handleInputChange를 통해 name과 password에 담긴 value값을 state로 지정해준다...

checkValidation = (e) => {
  e.preventDefault();
const {name, pw} = this.state;
  let checkId = name.includes('@');
  let checkPw = pw.length >= 4;
  if (checkId && checkPw) {
    alert ("로그인 성공!");
    this.goToMain();
  }
  if(!checkPw) {
    alert('id에는 @가 포함되어야 합니다');
  } 
  if(!checkPw) {
    alert ("비밀번호는 4자리 이상이어야 합니다");
  }
}

goToMain = (e) => {
  this.props.history.push('/MainHyeSooAhn');
}

로그인버튼을 클릭했을 때, this.state.name과 this.state.pw가 조건을 만족하면 main페이지로 이동, 만족하지 않으면, alert창을 띄우는 checkValidation을 실행되게(onClick) 한다.

👀 아이디, 패스워드 입력시 버튼색 바뀌게 하기

let activateBtn = (this.state.name.length && this.state.pw.length) !== 0;

---

<button id='btnLogin' 
        onClick={this.checkValidation}
        className={activateBtn ? "active" : ""}>로그인</button>

👀 패스워드 쳤을 때 show, hide버튼으로 비밀번호 보여지고, 숨겨지게

<input id="pw" type={this.state.hiddenPW ? "password":"text"} placeholder="비밀번호" onChange={this.handleInputValueChange}/>
<span className="showPw" onClick={this.showPassword}>{this.state.hiddenPW? "Show":"Hide"}</span>

showPassword = ()=> {
  this.setState({ hiddenPW: !this.state.hiddenPW });
}

1) this.state.hiddenPW가 true면 password타입으로, false면 text타입으로 보여지게 하고,
2) click했을 때 showPassword라는 함수를 통해 hiddenPW의 state를 변경,
3) {this.state.hiddenPW? "Show":"Hide"} hiddenPW의 상태에 따라 각각 다른 text(show or hide) 보여지게 한다.

메인페이지

👀 좋아요, 북마크 모달창 만들기

this.state = {
    id: 'hs_kkom',
    comment: '',
    addContent: [],
    like : false,
    commentList : [],
    bookmark : false
  };

---

<img id='likeButton' src={likeBtn} onClick={() => this.setState({like: !like})} />

---

const likeBtn = like? '/images/HyeSooAhn/likeheart.png' : '/images/navigationIcon/heart.png';

1. like: false인 상태
2. likeBtn: 삼항연산자 사용 like의 true, false에 따라 다른 이미지 return
3. onClick에 like의 state 바꿔준다.
4. src에 likeBtn 걸어준다.