DOM에 이름 달기

import { Component } from 'react';
import './ValidationSample.css';

class ValidationSample extends Component{

    state={
        password:'',
        clicked: false,
        vaildated: false
    }

    handleChange = (e) =>{
        this.setState({
            password: e.target.value
        });
    }

    handlebutton = () =>{
        this.setState({
            clicked:true,
            vaildated: this.state.password ==='1234'
        })

        console.log(this.state.password);
    }
    
    render(){
        return(
            <div>
                <input
                type="password"
                value={this.state.password}
                onChange={this.handleChange}
                className={this.state.clicked ? (this.state.vaildated ? 'success' : 'failure'): ''}
                />
                <button onClick={this.handlebutton}>검증하기</button>
            </div>
        );
    }
}

export default ValidationSample;​

비밀번호 인증 소스

 

DOM을 꼭 사용해야되는 상황

1. 특정 input에 포커스 주기

2. 스크롤 박스 조작

3. canvas요소에 그림 그리기

 

import { Component } from 'react';
import './ValidationSample.css';

class ValidationSample extends Component{

    state={
        password:'',
        clicked: false,
        vaildated: false
    }

    handleChange = (e) =>{
        this.setState({
            password: e.target.value
        });
    }

    handlebutton = () =>{
        this.setState({
            clicked:true,
            vaildated: this.state.password ==='1234'
        })

        this.input.focus();
    }

    handleFocus =() =>{
        this.input.current.focus();
    }
    
    render(){
        return(
            <div>
                <input
                ref={(ref)=>this.input=ref}
                type="password"
                value={this.state.password}
                onChange={this.handleChange}
                className={this.state.clicked ? (this.state.vaildated ? 'success' : 'failure'): ''}
                />
                <button onClick={this.handlebutton}>검증하기</button>
            </div>
        );
    }
}

export default ValidationSample;

1. input createRef 사용

import { Component } from "react";

class ScrollBox extends Component{
    
    render(){
        const style={
            border: '1px solid black',
            height: '300px',
            width: '300px',
            overflow: 'auto',
            position: 'relative'
        };

        const innerStyle={
            height: '650px',
            width: '100%',
            background: 'linear-gradient(white, black)'
        };

        return(
            <div
                style={style}
                ref={(ref)=> {this.box=ref}}
            >
                <div style={innerStyle}></div>
            </div>
        );
    }
}

export default ScrollBox;

2. 스크롤 박스 조작

import { Component } from "react";

class ScrollBox extends Component{

    scrollToBottom=()=>{

        const {scrollHeight, clientHeight}= this.box;
        this.box.scrollTop=scrollHeight-clientHeight;

    }
    
    render(){
        const style={
            border: '1px solid black',
            height: '300px',
            width: '300px',
            overflow: 'auto',
            position: 'relative'
        };

        const innerStyle={
            height: '650px',
            width: '100%',
            background: 'linear-gradient(white, black)'
        };

        return(
            <div
                style={style}
                ref={(ref)=> {this.box=ref}}
            >
                <div style={innerStyle}></div>
            </div>
        );
    }
}

export default ScrollBox;

import { Component } from "react";
import ScrollBox from "./ScrollBox";

class App extends Component{
  render(){
    return(
      <div>
      <ScrollBox ref={(ref) => this.ScrollBox=ref}/>
      <button onClick={()=> this.ScrollBox.scrollToBottom()}>
        맨 밑으로
        </button>
      </div>
    );
  }
}

export default App;

2-1. 스크롤 박스 활용 - 맨 밑으로 스크롤 내려가는 버튼 추가

 

[React] React에서 Canvas 사용하기(마우스로 그리기) (velog.io)

[React] React에서 Canvas 사용하기(마우스로 그리기)

3. canvas

실습 함