[React] ref 활용 : 스크롤 박스 구현 , 패스워드 검증

스크롤 박스 구현

ScrollBox 컴포넌트 생성

class ScrollBox extends Component {
  render() {
    const styles = {
      outer: {
        border: "2px solid black",
        height: 300,
        width: 300,
        overflow: "auto", //div안의 내용이 넘치면 스크롤바가 생기도록
      },
      inner: {
        width: "100%",
        height: 650,
        background: "linear-gradient(white,black)",
      },
    };
    return (
      <>
        <div style={styles.outer}>
          <div style={styles.inner}></div>
        </div>
      </>
    );
  }
}
export default ScrollBox;

ScrollBox 컴포넌트에 맨 위로 이동, 맨 아래로 이동 버튼을 추가

바닥 또는 위로 스크롤하는 함수를 추가

맨 위로 스크롤이 가게 하려면 scrollTop = 0
맨 아래로 가게 하려면 scrollTop 속성을 scrollHeight에서 clientHeight를 빼준 값으로 설정하면 된다

const scrollHeight = this.myDiv.scrollHeight;
const clientHeight = this.myDiv.clientHeight;

const { scrollHeight, clientHeight } = this.myDiv; 과 동일

ref={x => this.myDiv=x} 로 접근하고 싶은 DOM에 ref를 걸어준다.
각 버튼에 위에서 만든 함수 적용

createRef() 이용한 버전

class ScrollBox extends Component {
    myDiv = React.createRef();

    scrollBottom = () => {
        const { scrollHeight, clientHeight } = this.myDiv.current;
        this.myDiv.current.scrollTop = scrollHeight - clientHeight;
    };

    scrollTop = () => {
        this.myDiv.current.scrollTop = 0;
    };

• myDiv = React.createRef(); 멤버 변수 선언

• this.myDiv.current 로 조회

return (
            <>
                <div style={styles.outer} ref={this.myDiv}>
                    <div style={styles.inner}></div>
                </div>
                <div>
                    <button onClick={this.scrollTop}>맨 위로 이동</button>
                    <button onClick={this.scrollBottom}>맨 아래로 이동</button>
                </div>
            </>
        );

• ref={this.myDiv} 로 변경

📦 최종 완성 📦

---

패스워드 검증

조건

• 각 입력칸이 비었으면 입력하라는 메시지 출력
• 두개의 PW 입력창에 값 일치 여부를 체크해서 적절한 메시지를 출력
• 문제가 있는 입력창으로 포커스를 이동하도록

기본구조

class App extends Component {
  state = {
    userID: "",
    userPw1: "",
    userPw2: "",
  };

  changeUser=(e)=>{
    this.setState({[e.target.name]:e.target.value})
  };

상태변수state와 이벤트 핸들러 함수 changeUser
각 input창 개수 만큼 이벤트핸들러를 만들지 않고 계산된 속성명 이용

'등록' 버튼 누르면 동작할 이벤트 핸들러 함수

e.preventDefault();
Submit 버튼의 기본 동작이 처리되지 않도록 설정 ➡️ 서버로 요청이 전달되지 않도록 !
서버로 요청이 가면 상태 변수가 초기화 됨

const {userId,userPw1,userPw2}=this.state;
객체 비구조화를 통해 상태변수를 지역변수로 변경 ➡️ 함수 안에서 사용할 수있도로 만들어줌

비밀번호 일치 여부 확인과 입력 내용 출력

<button type="submit" onClick={this.clickButton}>등록</button>

입력창을 직접 제어하기 위한 ref를 추가 (콜백 함수 이용)

ID: <input ref={(x) => this.refUserId = x} type="text" value={userId} name="userId" onChange={this.changeUser} /><br />
PW: <input ref={(x) => this.refUserPw1 = x} type="password" value={userPw1} name="userPw1" onChange={this.changeUser} /><br />
PW: <input ref={(x) => this.refUserPw2 = x} type="password" value={userPw2} name="userPw2" onChange={this.changeUser} /><br />

'등록' 버튼을 클릭했을 때 동작을 추가

clickButton = (e) => {
    e.preventDefault();
    const { userId, userPw1, userPw2 } = this.state; 

    if (userId.trim() === "") {
      alert("ID를 입력하세요");
      this.refUserId.focus(); //⭐️ 아이디 창에 포커스 줌
      return; 
    }
    if (userPw1.trim() === "") {
      alert("비밀번호를 입력하세요");
      this.refUserPw1.focus(); //⭐️ 포커스
      return; 
    }
    if (userPw2.trim() === "") {
      alert("비밀번호 확인을 입력하세요");
      this.refUserPw2.focus(); //⭐️ 포커스
      return; 
    }
  
    if (userPw1.trim() !== userPw2.trim()) {
      alert("PW1과 PW2이 일치하지 않습니다.");
      this.setState({ userPw1: "", userPw2: "" });
      this.refUserPw1.focus(); //⭐️ 포커스
      return;
    }