[React] 개발자 지망생 스터디 - 24일차

React_component

---

4. props

properties의 약자
상위 컴포넌트(포함하고 있는 컴포넌트, 부모 컴포넌트)에서 하위 컴포넌트에게 데이터를 넘겨줄 때 사용하는 개체

1) 넘겨 줄 때

<컴포넌트 이름 props 이름 = 값 ... >

> 개수 제한 없음

2) 사용

> 클래스형 컴포넌트는 this.props.이름으로 사용
> 함수형 컴포넌트는 모든 props를 하나로 묶어서 함수의 매개변수로 받음
   함수의 매개변수를 이용해 사용

3) props 사용

# src 디렉토리에 컴포넌트 생성
🗂component → 📁 src → (CREATE)📄 MyComponent.jsx

import React from "react";

const MyComponent = () => {
    return(<><div>나의 컴포넌트</div></>)
};

export default MyComponent;

=>src 디렉토리의 App.js를 수정
import MyComponent from "./MyComponent";

function App() {
  return (
    <MyComponent/>
  );
}

export default App;

# App.js 파일을 수정
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";

function App() {
  return (
    <MyComponent name="Adam"/>
  );
}

export default App;

 
# MyComponent.jsx 파일 수정
🗂component → 📁 src → 📄 MyComponent.jsx

import React from "react";

const MyComponent = (props) => {
    return(<><div>나의 컴포넌트의 이름은 {props.name} 입니다.</div></>)
};

export default MyComponent;

> 화면에 출력되는지 확인

 

5) Props 기본값 설정

# App.js 파일을 수정
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";

function App() {
  return (
    <MyComponent/>
  );
}

export default App;

 

> name 이라는 props 값을 전달하지 않으면 아무것도 출력되지 않음
   함수형 컴포넌트 안에서 컴포넌트이름.defaultProps = {props이름:값...} 을 이용해서 기본값을 설정할 수 있음
   데이터가 넘어오지 않는 경우 설정되는 값임

# MyComponet.jsx 파일을 수정해서 기본값을 설정
🗂component → 📁 src → 📄 MyComponent.jsx

import React from "react";

const MyComponent = (props) => {
    return(<><div>나의 컴포넌트의 이름은 {props.name} 입니다.</div></>)
};

MyComponent.defaultProps = {
    name:'기본값'
}
export default MyComponent;

6) 태그 안의 내용 사용

> props.children을 이용해서 상위 컴포넌트에서 태그 안에 삽입한 데이터를 읽어낼 수 있음

# App.js 파일을 수정해서 태그 안에 내용을 삽입
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";

function App() {
  return (
    <MyComponent>태그 안의 내용</MyComponent>
  );
}

export default App;​

# MyComponent.jsx 파일을 수정해서 태그 안의 내용을 출력
🗂component → 📁 src → 📄 MyComponent.jsx

import React from "react";

const MyComponent = (props) => {
    return(<>
    <div>나의 컴포넌트의 이름은 {props.name} 입니다.</div>
    <p>{props.children}</p>
    </>)
};

MyComponent.defaultProps = {
    name:'기본값'
}
export default MyComponent;​

> 실행 한 후 태그 안의 내용이 출력되는지 확인

7) 비구조화 할당

# 자바스크립트는 객체를 분해해서 할당하는 것이 가능
> 분해해서 할당할 때는 인덱스가 아니라 이름을 가지고 데이터를 할당 함

# MyComponent.jsx 파일의 props를 분해해서 할당
🗂component → 📁 src → 📄 MyComponent.jsx

import React from "react";

const MyComponent = ({children, name}) => {
    return(<>
    <div>나의 컴포넌트의 이름은 {name} 입니다.</div>
    <p>{children}</p>
    </>)
};

MyComponent.defaultProps = {
    name:'기본값'
}
export default MyComponent;​

8)Props 의 유효성 검사 기능

> 필수 나 자료형을 설정해서 검사가 가능
> 화면 출력에는 영향이 없고 스크립트 오류를 발생시켜서 검사 창에서만 오류가 발생
> props 값을 전달할 때 문자열이 아니면 { }로 감싸야 함
   기본적으로 XML에서는 태그 안의 속성은 문자열만 가능하기 때문

# App.js 수정
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";

function App() {
  return (
    <MyComponent name = {3}>태그 안의 내용</MyComponent>
  );
}

export default App;

# MyComponent.jsx 파일을 수정
🗂component → 📁 src → 📄 MyComponent.jsx

import React from "react";

import PropTypes from 'prop-types';

const MyComponent = ({children, name, year}) => {
    return(<>
    <div>나의 컴포넌트의 이름은 {name} 입니다.</div>
    <p>{children}</p>
    <p>나는 {year}년에 태어났습니다.</p>
    </>)
};

MyComponent.propTypes = {
    name:PropTypes.string,
    year:PropTypes.number.isRequired
}

MyComponent.defaultProps = {
    name:'기본값'
}
export default MyComponent;

# 결과를 확인하면 화면 상에는 아무런 문제가 없음
> 검사 창을 열어서 콘솔을 확인하면 자료형 과 필수 속성에 문제가 있다고 오류가 출력됨

9) 앞의 내용을 클래스형 컴포넌트로 변환

# MyComponent.jsx 파일을 수정
🗂component → 📁 src → 📄 MyComponent.jsx

//클래스형 컴포넌트
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component{
    render(){
        //props 가져오기
        //클래스형 컴포넌트에는 props 속성이 존재
        const {name, year, children} = this.props;
        return (
            <>
                <div>안녕하세요 제 이름은 {name} 입니다.</div>
                <p>children 값은 {children}</p>
                <p>제가 태어난 해는 {year} 입니다.</p>
            </>
        );
    }
}

MyComponent.defaultProps = {
    name:'기본이름'
}

MyComponent.propTypes = {
    name:PropTypes.string,
    year:PropTypes.number.isRequired
}

export default MyComponent;

5. State

> props 는 상위 컴포넌트에서 하위 컴포넌트에게 데이터를 넘겨주는 개념
   하위 컴포넌트는 props는 읽기 전용으로만 사용 가능

1) 개요

> Component 내부에서 읽고 쓸 수 있는 값을 사용하고자 할 때 사용
> 기본값을 설정할 수 있으며 setter 메서드를 이용해서 수정하는 것도 가능
> 클래스형 컴포넌트의 경우 초깃값 설정은 constructor(props) 메서드에서 수행
   this.state = {state 이름: 값,.......}
> 클래스형 컴포넌트의 경우 값의 수정은 setState 메서드를 이용
   this.setState({state이름:값,....}) 

2) 클래스형 컴포넌트에서의 state 사용

# StateComponent.jsx 파일을 생성하고 작성
🗂component → 📁 src → 📄 StateComponent.jsx

import React, {Component} from 'react';

class StateComponent extends Component{
    constructor(props){
        //상위 클래스의 생성자 호출
        super(props);
        //state 생성
        this.state = {number:0}
    }

    render(){
        return(
            <>
                <p>숫자:{this.state.number}</p>
                <button onClick={(e) => {
                    this.setState({
                        number:this.state.number+1
                    })
                }}>증가</button>
            </>
        )
    }
};

export default StateComponent;

# App.js 파일 수정해서 새로 생성한 컴포넌트 추가
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";
import StateComponent from "./StateComponent";

function App() {
  return (
    <>
      <MyComponent name = {3}>태그 안의 내용</MyComponent>
      <StateComponent/>
    </>
  );
}

export default App;

3) 생성자 외부 클래스 안에서 초기화 가능

# StateComponent.jsx 수정
🗂component → 📁 src → 📄 StateComponent.jsx

import React, {Component} from 'react';

class StateComponent extends Component{
    state = {number:0};
    /*
    constructor(props){
        //상위 클래스의 생성자 호출
        super(props);
        //state 생성
        this.state = {number:0}
    }
    */

    render(){
        return(
            <>
                <p>숫자:{this.state.number}</p>
                <button onClick={(e) => {
                    this.setState({
                        number:this.state.number+1
                    })
                }}>증가</button>
            </>
        )
    }
};

export default StateComponent;

 

4) state 에 함수 전달

> state도 하나의 속성이고 자바스크립트는 함수도 하나의 데이터이므로 state에 함수를 전달하는 것이 가능함

#StateComponent.jsx 파일의 button 의 onClikc 이벤트 처리 코드 수정
🗂component → 📁 src → 📄 StateComponent.jsx

 <button onClick={(e) => {
	this.setState(
		prevState => {return{number: prevState.number + 1}}
	)
}}>증가</button>

5) state 설정이 끝난 후 콜백 호출

> setState에 2번째 매개변수로 함수를 전달하면 state 설정을 변경한 후 호출되는 함수를 설정할 수 있음

# StateComponent.jsx 파일의 button 의 onClick 이벤트 처리 코드 수정
🗂component → 📁 src → 📄 StateComponent.jsx

<button onClick={(e) => {
	this.setState(
    	{number:this.state.number+1}, () => {
			console.log('state 의 값이 변경됨');
			console.log(this.state);
		}
	)
}}>증가</button>

> 한 곳에서만 사용하는 데이터가 있는 경우 로컬의 데이터를 업데이트하고 업데이트가 끝나면 서버에 업로드 할는 형태를 만들 때 유용하게 사용 할 수 있음

6) useState

> 함수형 컴포넌트에서 state를 사용하기 위한 Hook
> 이 함수를 호출하면 배열이 리턴되는데 배열의 첫번째 데이터는 현재 상태이고 두번째 데이터는 상태를 변경해주는 함수임
상태를 변경하는 함수를 setter 라고 하고 대부분 이름을 set상태이름의 형태로 만들고 상태이름의 첫글자는 대분자로 함
useState 에는 상태의 초기값을 매개변수로 대입함

# StateComponent를 함수형 컴포넌트로 변경
🗂component → 📁 src → 📄 StateComponent.jsx

import React, {useState} from 'react';

const StateComponent = () => {
    //함수형 컴포넌트에서 state를 생성하는 방법
    const [message, setMessage] = useState('');

    //버튼에 연결한 이벤트 처리 함수
    const onClickEnter = (e) => {setMessage('안녕하세요')}
    const onClickLeave = (e) => {setMessage('안녕히 가세요')}

    return(
        <>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1>{message}</h1>
        </>
    )
};

export default StateComponent;​

# StateComponent에 색상을 위한 state 추가
🗂component → 📁 src → 📄 StateComponent.jsx

import React, {useState} from 'react';

const StateComponent = () => {
    //함수형 컴포넌트에서 state를 생성하는 방법
    const [message, setMessage] = useState('');

    //버튼에 연결한 이벤트 처리 함수
    const onClickEnter = (e) => {setMessage('안녕하세요')}
    const onClickLeave = (e) => {setMessage('안녕히 가세요')}

    const [color, setColor] = useState('black');

    return(
        <>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <h1 style={{color}}>{message}</h1>
            <button style={{color:'red'}} 
                onClick={()=>setColor('red')}>빨강</button>
            <button style={{color:'green'}} 
                onClick={()=>setColor('green')}>녹색</button>
            <button style={{color:'blue'}} 
                onClick={()=>setColor('blue')}>파랑</button>
        </>
    )
};

export default StateComponent;​

 

7) state 사용시 주의 사항

> state를 수정할 때는 클래스형 컴포넌트에서는 setState 그리고 함수형 컴포넌트에서는 useState 함수를 이용해야 함
> 객체 나 배열을 수정할 때는 복사본을 만들고 수정해야 함

let object = {'name':'adam', 'age':29};
//name 수정 - object 의 속성을 직접 수정
object.name = '군계';

//기존 object 의 내용을 복제해서 name을 수정
const copyObject = {...object, 'name':'군계'};

let ar = [1, 2, 3];
//배열에 직접 추가
ar.push[4];
//배열을 복제해서 추가
let copyAr = ar.concat(4);

//배열에서 데이터를 삭제하거나 변형을 가하고자 할 때는 filter 나 map 함수 이용​

> filter 나 map은 작업을 수행한 후 새로운 배열을 생성

6.Event Handling

1) 주의 사항

> 이벤트 이름은 camelCase : 시작은 소문자로 하고 두번째 단어부터는 시작이 대문자
> 자바스크립트 코드를 단순하게 작성하는 것이 아니고 함수 형태의 값을 전달
> DOM 요소에만 이벤트를 설정 - Component 에는 이벤트 설정이 안됨
> 이벤트 종류 : https://reactjs.org/docs/events.html

SyntheticEvent – React

2) onChange 이벤트 - 입력 내용이 변경될 때 호출되는 이벤트

# 이벤트 처리를 위한 컴포넌트 생성
🗂component → 📁 src → 📄 EventComponent.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='이름을 입력하세요'
                onChange = {
                    (e) => {console.log(e.target.value)}
                } />
            </>
        );
    }
}

export default EventPractice;​

# App.js 수정
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";
import StateComponent from "./StateComponent";
import EventPractice from "./EventPractice";

function App() {
  return (
    <>
      <MyComponent name = {3}>태그 안의 내용</MyComponent>
      <StateComponent/>
      <EventPractice />
    </>
  );
}

export default App;​

# EventPractice.jsx 내용을 수정해서 입력 내용을 state에 저장하고 출력
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:''
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {
                    (e) => {this.setState({name:e.target.value})}
                } />
            </>
        );
    }
}

export default EventPractice;​

# EventPractice.jsx 파일을 수정해서 버튼을 누를 때 state에 저장된 name 의 값을 다이얼로그에 출력
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:''
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {
                    (e) => {this.setState({name:e.target.value})}
                } />
                <button onClick={
                    (e) => {
                        alert(this.state.name);
                        this.setState({
                            name:''
                        })
                    }
                }>확인</button>
            </>
        );
    }
}

export default EventPractice;​

3) 이벤트 처리를 별도의 함수로 처리

> 이벤트 처리하는 코드를 별도의 함수에 만들거나(모듈화) 상위 컴포넌트에서 만든 후 넘겨주는 경우(여러 컴포넌트에서 공통으로 사용하는 데이터를 조작하는 경우)가 있음

# EventPractice.jsx 파일을 수정해서 별도의 함수로 이벤트 처리 코드를 작성
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:''
    }

    handleChange(e){
        this.setState({
            name:e.target.value
        })
    }

    handleClick(e){
        alert(this.state.name);
        this.setState({
            name:''
        })
    }

    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {this.handleChange} />
                <button onClick={this.handleClick}>확인</button>
            </>
        );
    }
}

export default EventPractice;​

4) 바벨의 transform-class-properties 문법 사용

> 클래스 안에 일반 메서드를 생성하면 바벨은 이를 인스턴스의 메서드로 자동 변형
> 클래스 안에 함수를 만든 경우 this에 다시 바인딩하지 않아도 됨

# EventPractice 수정
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:''
    }
    //babel 이 인스턴스의 메서드로 변환을 자동으로 수행
    //this.handleChange로 이 메서드를 사용하는 것이 가능
    handleChange = (e) => {
        this.setState({
            name:e.target.value
        })
    }

    handleClick = (e) => {
        alert(this.state.name);
        this.setState({
            name:''
        })
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {this.handleChange} />
                <button onClick={this.handleClick}>확인</button>
            </>
        );
    }
}

export default EventPractice;​

5) EventRouting

> 하나의 함수로 여러 DOM의 이벤트를 처리하는 것
이벤트 처리 함수의 매개변수로 Event 객체가 전달되는데 이벤트 처리 함수의 매개변수의 target 속성을 호출하면 이벤트가 발생한 객체의 참조를 리턴함
이벤트가 발생한 객체의 참조를 가지고 분기문을 만들어서 이벤트 처리 코드를 작성하면 하나의 함수를 가지고 여러 DOM의 이벤트 처리가 가능함
name이나 id 속성 등을 적절히 이용

# EventPractice.jsx 파일을 수정
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:'',
        message:''
    }
    //babel 이 인스턴스의 메서드로 변환을 자동으로 수행
    //this.handleChange로 이 메서드를 사용하는 것이 가능
    handleChange = (e) => {
        //이벤트가 발생한 객체는 e.target
        //e.target.name 은 이벤트가 발생한 객체의 name
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    handleClick = (e) => {
        alert(this.state.name + ":" + this.state.message);
        this.setState({
            name:'',
            message:''
        });
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='메시지를 입력하세요'
                value = {this.state.message}
                onChange = {this.handleChange} />

                <input type='text'
                name = 'name'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {this.handleChange} />

                <button onClick={this.handleClick}>확인</button>
            </>
        );
    }
}

export default EventPractice;​

> input을 여러 개 만들 때는 되도록이면 input 의 name과 state 의 name을 맞춰주면 값이 변경될 때 state에 저장하는 부분이 쉬워짐

6) onkeyPress

> 키보드를 누를 때 발생하는 이벤트
react 에서는 키보드 이벤트에서 이벤트 객체의 key 라는 속성에 누른 키 값을 전달하는데 문자열 형태로 전달함

# input에서 Enter를 누르면 버튼 클릭한 것 과 동일한 효과를 나타내도록 EventPractice.jsx 를 수정
🗂component → 📁 src → 📄 EventPractice.jsx

import React, {Component} from 'react';
class EventPractice extends Component{
    state = {
        name:'',
        message:''
    }
    //babel 이 인스턴스의 메서드로 변환을 자동으로 수행
    //this.handleChange로 이 메서드를 사용하는 것이 가능
    handleChange = (e) => {
        //이벤트가 발생한 객체는 e.target
        //e.target.name 은 이벤트가 발생한 객체의 name
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    handleClick = (e) => {
        alert(this.state.name + ":" + this.state.message);
        this.setState({
            name:'',
            message:''
        });
    }

    handleKeyPress = (e) => {
        if(e.key === 'Enter'){
            this.handleClick();
        }
    }

    render(){
        return(
            <>
                <h1>이벤트 연습</h1>
                <input type='text'
                name = 'message'
                placeholder='메시지를 입력하세요'
                value = {this.state.message}
                onChange = {this.handleChange} 
                onKeyPress = {this.handleKeyPress}/>

                <input type='text'
                name = 'name'
                placeholder='이름을 입력하세요'
                value = {this.state.name}
                onChange = {this.handleChange} 
                onKeyPress = {this.handleKeyPress}/>

                <button onClick={this.handleClick}>확인</button>
            </>
        );
    }
}

export default EventPractice;

7) EventPractice.jsx 파일을 수정해서 함수형 컴포넌트로 변환

🗂component → 📁 src → 📄 EventPractice.jsx

import React, {useState} from 'react';
const EventPractice  = () => {
    /*
    const [name, setName] = useState('');
    const [message, setMessage] = useState('');
    */

   

    const [form, setForm] = useState({
        username:'',
        message:''
    });
    const {username, message} = form;

    const onChange = (e) => {
        //form을 복제해서 e.target.name 에 해당하는 속성만
        //e.target.value로 수정
        //react 에서는 state를 수정할 때 복제해서 수정합니다.
        //하나의 항목으로 만들어진 데이터는 바로 수정하면 되지만
        //여러 항목으로 구성된 객체 나 배열은 복제해서 수정합니다.
        //자바스크립트에서 객체 와 배열을 복제한 후 작업하는 방법에
        //대해서 알아두어야 합니다.
        const nextForm = {
            ...form,
            [e.target.name]:e.target.value
        };

        setForm(nextForm);
    }

    //버튼 클릭 이벤트 처리 함수
    const onClick = (e) => {
        alert(username + ":" + message);
        setForm({
            username:'',
            message:''
        })
    }

    //input에서 enter 쳤을 때 처리를 위한 함수
    const onKeyPress = (e) => {
        if(e.key === 'Enter'){
            onClick();
        }
    }

    return(
        <>
            <input
                type="text"
                name="username"
                value={username}
                placeholder='이름을 입력하세요'
                onChange={onChange}
                onKeyPress={onKeyPress}/>
            <input
                type="text"
                name="message"
                value={message}
                placeholder='메시지를 입력하세요'
                onChange={onChange}
                onKeyPress={onKeyPress}/>
            <button onClick = {onClick}>확인</button>
        </>
    );
}

export default EventPractice;

 

 

7. ref

• HTML에서는 DOM 요소에 어떤 작업을 수행하고자 하는 경우 DOM 객체에 id를 부여한 후 document.getElementById 라는 함수로 DOM 객체를 찾은 후 작업을 수행
• react 는 직접 DOM을 찾아와서 사용하는 작업을 거의하지 않는데 id 대신 ref 라는 개념을 가지고 DOM 을 찾아서 핸들링

1) ref 를 설정하는 방법

> 콜백 함수를 이용하는 방법 : <태그 ref-{(ref) => {this.? = ref}}/>
> createRef() 함수를 이용하는 방법 : 
이름 : React.createRef();
<태그 ref={this.이름}>

2) css 를 설정하는 컴포넌트 생성

# src 디렉토리에 ValidationSample.css 파일을 만들고 작성
🗂component → 📁 src → (CREATE)📄 ValidationSample.css

.success{
    background-color:lightgreen;
}

.failure{
    background-color:lightcoral;
}​

# ValidationSample.css 파일을 적용할 클래스형 컴포넌트 생성
🗂component → 📁 src → (CREATE) 📄 ValidationSample.jsx

import React, {Component} from 'react';

import './ValidationSample.css';

class ValidationSample extends Component {
    state = {
        password:'',
        clicked:false,
        validated:false
    };

    handleButtonClick = (e) => {
        this.setState({
            clicked:true,
            validated:this.state.password === '0000'
        })
    }

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

    render(){
        return(
            <div>
                <input type='password'
                value = {this.state.password}

                name = 'password'
                onChange = {this.handleChange}

                className = {
                    this.state.clicked ?  
                        this.state.validated ?
                            'success':'failure'
                        :''} />
                <button onClick={this.handleButtonClick}>
                    검증하기
                </button>

            </div>
        )
    }
}

export default ValidationSample;​

# App.js 수정
🗂component → 📁 src → 📄 App.js

import MyComponent from "./MyComponent";
import StateComponent from "./StateComponent";
import EventPractice from "./EventPractice";
import ValidationSample from "./ValidationSample";

function App() {
  return (
    <>
      <MyComponent name = {3}>태그 안의 내용</MyComponent>
      <StateComponent/>
      <EventPractice />
      <ValidationSample />
    </>
  );
}

export default App;​

3) 유효성 검사를 수행한 후 input 에 포커스를 설정하도록 ValidationSample.jsx 파일을 수정

🗂component → 📁 src → 📄 ValidationSample.jsx

import React, {Component} from 'react';

import './ValidationSample.css';

class ValidationSample extends Component {
    //Ref(다른 DOM 객체를 참조할 수 있는 속성) 생성
    input = React.createRef();

    //state - 클래스 안의 멤버 변수 나 함수 안의 지역 변수 와 유사
    //state는 변경이 되면 화면에 바로 적용됩니다.
    state = {
        password:'',
        clicked:false,
        validated:false
    };
    //버튼 눌렀을 때 처리
    handleButtonClick = (e) => {
        this.setState({
            clicked:true,
            validated:this.state.password === '0000'
        })

        //input이 참조하는 객체에 focus를 설정
        this.input.current.focus();
    }
    //input 의 입력 값을 변경했을 때 처리
    //자신의 name 과 동일한 state를 입력한 값으로 변경
    handleChange = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }
    //클래스형 컴포넌트에서 화면에 출력할 내용을 리턴하는 함수
    render(){
        return(
            <div>
                <input type='password'
                ref = {this.input}
                value = {this.state.password}
                name = 'password'
                onChange = {this.handleChange}

                className = {
                    this.state.clicked ?  
                        this.state.validated ?
                            'success':'failure'
                        :''} />
                <button onClick={this.handleButtonClick}>
                    검증하기
                </button>

            </div>
        )
    }
}

export default ValidationSample;

4) ref 설정 방법 변경

🗂component → 📁 src → 📄 ValidationSample.jsx

import React, {Component} from 'react';

import './ValidationSample.css';

class ValidationSample extends Component {
    //Ref(다른 DOM 객체를 참조할 수 있는 속성) 생성
    //input = React.createRef();

    //state - 클래스 안의 멤버 변수 나 함수 안의 지역 변수 와 유사
    //state는 변경이 되면 화면에 바로 적용됩니다.
    state = {
        password:'',
        clicked:false,
        validated:false
    };
    //버튼 눌렀을 때 처리
    handleButtonClick = (e) => {
        this.setState({
            clicked:true,
            validated:this.state.password === '0000'
        })

        //input이 참조하는 객체에 focus를 설정
        //createRef 함수로 만든 경우
        //this.input.current.focus();

        this.input.focus();
    }
    //input 의 입력 값을 변경했을 때 처리
    //자신의 name 과 동일한 state를 입력한 값으로 변경
    handleChange = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }
    //클래스형 컴포넌트에서 화면에 출력할 내용을 리턴하는 함수
    render(){
        return(
            <div>
                <input type='password'
                ref = {ref => {this.input = ref}}
                value = {this.state.password}
                name = 'password'
                onChange = {this.handleChange}

                className = {
                    this.state.clicked ?  
                        this.state.validated ?
                            'success':'failure'
                        :''} />
                <button onClick={this.handleButtonClick}>
                    검증하기
                </button>

            </div>
        )
    }
}

export default ValidationSample;

5) Component 에 Ref 설정

> 컴포넌트 내의 변수 나 메서드에 접근이 가능
다른 컴포넌트에 Ref 속성을 이용해서 조작이 가능
컴포넌트를 다른 곳에서 조작하고자 할 때 Ref를 적절히 활용하면 됨

# Scroll 이 가능한 컴포넌트를 생성 - ScrollBox.jsx
🗂component → 📁 src → (CREATE) 📄 ScrollBox.jsx

import React, {Component} from 'react';

class ScrollBox extends Component{
    render(){
        const style = {
            border:'1px solid black',
            height:'300px',
            width:'300px',
            overflow:'auto',
            position:'relative'
        };
        const innerStyle = {
            width:'100%',
            height:'650px',
            background:'linear-gradient(white, black)'
        };

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

    //스크롤 박스의 스크롤을 맨 아래로 이동시키는 메서드
    scrollToBottom = () =>{
        const {scrollHeight, clientHeight} = this.box;
        this.box.scrollTop = scrollHeight - clientHeight;
    }
}

export default ScrollBox;

> App.js 에서 ScrollBox 출력