[React] 스크롤되는 Textarea 구현

import React, {Component} from 'react';

class ScrollableTextarea extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text:'' // textarea에 적을 내용
        };
    }

    componentDidMount() {
        this.textarea.value = this.state.text;
    }

    handleTextareaChange = (event) => {
        this.setState({text: event.target.value});
    };

    render() {
        return(
            <div className="textarea-container">
                <textarea
                    className="textarea"
                    rows="38" // height 임의 지정
                    cols="60" // width 임의 지정
                    ref={(textarea) => (this.textarea = textarea)}
                    onChange={this.handleTextareaChange}
                    spellcheck="false" // 맞춤법 검사(빨간 밑줄) 해제
                />
            </div>
        );
    }
}
export default ScrollableTextarea;

 

 

위 코드를 실행하면!

 

 

이렇게 textarea 우측에 스크롤바가 생겼음을 알 수 있고,

스크롤바를 활용해 화면 상하로 이동할 수 있습니다!

😊😊