laka project2 삼항연산자 & overflow-y & checkBox & warningM & password regex & callback in EventListener

20.05.28

스크롤 박스 & 삼항연자

BE에서는 하나의 기능을 하는게 앱이라고 한다.

스크롤 박스

• overflow-y : y축에 대항하는 스크롤 바, 내부의 content가 박스를 넘지않으면, 스크롤바가 없고 박스를 넘으면, 스크롤 바가 생김.

.productWish{
    min-width: 360px;
    max-width: 360px;
    height: 110px;
    overflow-y: auto;

삼항연산자

• display속성이 cup(조건식)인데 이것이 true(?)라면 'block'으로 false(:)라면 'none

style={{ display: cup ? 'block' : 'none' }}>
style={{this.state.hello ? {{display: 'block'}} : {{display: 'none'}}}}

//아래보다 위가 더 간단한 조건식이다.

20.05.29
#체크박스 & 경고메세지

CheckBox

체크박스 CSS

<label class="checkbox-label">
  <input type="checkbox" className="checkbox" onChange={this.genderCheck} checked={gender.isChecked} value={gender.value} key={gender.id} {...gender} />
  <span className="checkbox-custom"></span>
  {gender.value}
</label>

왜 라벨로 감싸?

• 사용자 인터페이스 요소를 라벨로 정의를 통한 요소 결합을 해, 요소와 연결된 요소를 바로 선택 가능해서, 사용자의 편의성이 높아지기 때문이다.

How to style a checkbox using CSS / Styling Checkbox - CSS Tips | AppIt Ventures / Check Mark HTML Symbol, Character and Entity Codes - HTML Arrows

체크박스 기능 구현

class SignUp extends Component {
  constructor() {
    super();
    this.state = {
      genders: [
        { id: 1, value: "남성", isChecked: false },
        { id: 2, value: "여성", isChecked: false },
      ],
      gender: "",
    }
  }

genderCheck = (e) => {
    let genders = this.state.genders //state에서 선언해준 배열의 값들
    genders.forEach(gender => {
      if (gender.value === e.target.value) { //위의 배열의 값들과, 아래 input박스의 이벤트로 받아온 값 비교
        **gender.isChecked = e.target.checked** //false에서 true
        console.log("check 확인", e.target.value) 
      }
    })
    this.setState({
      gender: e.target.id
    })
    console.log(e.target.value)
  }

return(
    <ul>
      {
        this.state.genders.map((gender) => {
          return (
            <li>
              <label class="checkbox-label">
                <input type="checkbox" className="checkbox" 
                 onChange={this.genderCheck} checked={gender.isChecked} 
                 value={gender.value} key={gender.id} 
                 {...gender} 
                />
                <span className="checkbox-custom"></span>
                {gender.value} //state.gender와 다름에 유의할 것.
              </label>
            </li>)
        })
      }
    </ul>
)

참고사이트

Multiple checkbox handling by React JS / just select one checkbox in reactjs

경고메세지

//sign up pw 조건

this.state = {
      idMessage: false,
      pwMessage: false,
      pwGex: false,
    }

pwCorrect = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
    if (this.state.pw !== e.target.value) {
      this.setState({ pwMessage: true })
    } else this.setState({ pwMessage: false })

        //수정 전 줬던 조건, value값만 확인해도 충분하다. 
        if (this.state.pw.length === e.target.value.length && this.state.pw !== e.target.value) {
           this.setState({ pwMessage: true })
        }
}

<input type="password" name="pwConform" onChange={this.pwCorrect} />
<span className="warningMessage" style={{ display: pwMessage ? 'block' : 'none' }}>비밀번호가 일치하지 않습니다.</span>

20.05.31

드롭다운 & 비밀번호 조건 & 함수 인자 전달

드롭다운

A dead simple dropdown component for React

• 이 라이브러리를 사용해봤으나, CSS커스텀마이징이 불가능
  
  (라이브러리를 사용해 본 것에 의의를 둬보쟈!)

비밀번호 조건

Sign up page에서 비밀번호를 생성시 복잡한 암호를 사용할 수 있도록 도와주는 장치

pwInput = (e) => {
    this.setState({ [e.target.name]: e.target.value });
    const reg = new RegExp("^(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*?<>|~_;:()])(?=.{8,16})");
    const isOk = reg.test(e.target.value);

    console.log(isOk)
    if (isOk === false) {
      this.setState({
        pwGex: true,
      })
    } else {
      this.setState({
        pwGex: false,
      })
    }
  }

참고사이트

검색어 🔭 - password requirements regex

Test Password Strength with RegEx in a React Application / Password validation in reactjs

테스트 해볼 수 있는 사이트

Password Requirements - Regex Tester/Debugger / RegExr: Learn, Build, & Test RegEx

함수에서 인자 전달시 콜백(callback)

---

검색어 🔭 - Send as value function I clicked in react

onClick 이벤트 핸들러를 통해 값을 매개변수로 전달한다. 이때 onClick 핸들러 내부에 arrow function를 사용해 전달한다.

const addList = colors.map((productInter, idx) => {
	return 
    <li>
    	<img src={productInter} alt="" className="colorChart" idx={idx} onClick={() => this.colorClick(productInter)} />
    </li>
});

//인자를 넘겨줄 때, () => 클릭시 인자를 넘겨주기 위해서, callback 함수가 없다면 클릭하기도 전에 실행된다.

🗣 콜백함수를 빼면 어떻게 될까?

참고사이트

React onClick Event Handling (With Examples) - Upmostly