[React] 3-13 React.createRef, props와 state연결하기

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

 

 

React.createRef 

클래스 컴포넌트에서도 함수 컴포넌트처럼 ref를 사용할 수 있게 해줌

Class, Hooks 상관없이 current로 접근 가능함

 

방법은 간단함 createRef를 import해주고

input = createRef();

원하는 태그에서 ref = {input}으로 호출해주면 된다. 

import React, { useState, createRef } from 'react';

const inputRef = createRef();
inputRef.current.focus();
<input ref={inputRef} .../>

 

 

 

 

props와 state 연결하기

 

render()안에 this.setState를 쓰면 안됨

this.setState를 하면 render가 실행되는데, render를 실행하면 또 this.setState그럼 또 render...

무한반복되니 당연 문제가 생김!! 

render안에는 절대!!! setState를 쓰지 말자! 

 

 

부모가 준 props을 자식이 임의로(?) 값을 바꾸면 안됨

props는 부모가 바꿔줘야함!!

바꾸고 싶다면 props를 state에 넣어주자! 

그래야 부모한테 영향이 안끼침!!

const Try = memo(({tryInfo}) => {

	const [result, setResult ] = useState(tryInfo.result); 
    // state를 만든 후에 그 state를 바꿔주자!
    const onClick = () => {
    	setResult('1);
    };
    
    return (
    	<li>
        	<div>{tryInfo.try}</div>
            <div onClick ={onClick}>{result}</div>
        </li>
        )
});

 

 

class

class Try extends PureComponent{
	constructor(props){
    super(props);
    //다른동작가능
    const filtered = this.props.filter(() => { });
        this.state = {
            result : filtered,
            try: this.props.try,
        };
    }
    ...

 

함수로 하는 경우는 정밀한 작업이 필요할때 기본 객체로는 안되는 경우에 constructor를 사용

클래스에서 constructor(props)를 사용할땐 항상 super(props)를 써줘야함!!

 

 

props < 컨텍스트 < 리덕스