Peep

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

react는 setState로 state관리를 한다.

불변성을 지켜야하기때문에 아래와 같이 사용했는데

this.setState({
	value : this.state.value
});

리액트 로직이 기존 state와 새로운 state를 비교하여 재 렌더링하기 때문에 참조형인 array, object 같은 경우에는 주의해야한다.

이때 배열에 push하게 되면 기존 참조된 배열에 push가 되기 때문에 기존 state와 새로운 state는 같아진다.

따라서 아래와 같이 새로운 배열을 set해줘야한다.

this.setState({
    array : [...this.state.array, {
        val : this.state.value
    }]
});

그리고 setState할때 과거의 state값을 사용해야하는 경우가 있는데, 아래와 같이 한다.

this.setState((prevState) => {
    array : [...prevState.array, {one : value, name : 'gaga'}]
});

prevState를 파라미터로 받아서 처리해줄 수 있다.

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

부모컴포넌트에서 props를 getNumber라고 명명해서 넘기면

자식컴포넌트에서 this.props.{명명한 이름} 으로 받으면 된다.

// 부모컴포넌트
<Test getNumber={num} />

// Test 컴포넌트
<div>
	{this.props.getNumber}
</div>

간단한 경우 props를 전달해 사용할 수 있지만 복잡해질 경우 관리가 어렵다고 한다.

그래서 사용하는 것이 context나 redux 같은 것들.

앞으로의 강의에서 나오겠지.

jsx에서의 주석은

return(
    <>
      {/* 이렇게 쓴다!! */}
    </>
  ); 

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

반복문을 돌릴때 key값을 필수로 입력해줘야한다.

성능최적화의 문제

따라서 key값은 단순히 index값이 아닌 유니크한 값이어야한다.

i + 1과 같이 예제로 쓴 것도 좋지않다고한다.

추후에 성능최적화와 관련된 공부를 해야겠다.

(수정 없이 추가만 단순히 할 경우 index만 넣어도 된다고한다)

 return (
    <>
      <ul>
        {test.map((v, i) => {
            return (
              <Example key={ `${i + 1}차 시도`} tryInfo={v} index={i} />
            );
        })} 
      </ul>
    </>
  );

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

전체적은 Example.js의 코드를 하나하나 뜯으면서 Hooks로 변경해보겠다.

const React = require('react');
const { Component } = React;

class Example extends Component{
	state = {
    	value : ''
    }
    
    onSubmit = () => {
    	// ...
    };
    
    onChange = () => {
    	// ...
    };
    
    inputEl;
    
    onRefInput = (c) => {
    	this.inputEl = c;
    };
    
    render(){
    	return(
        	<>
            	<form>
                	<input type="text" ref={this.onRefInput} value={this.state.value} onChange={this.onChange}/>
                </form>
            	<div>{this.state.value}</div>
            </>
        );
    }
}    

module.exports = Example

require를 import로 수정하고(이건 Hooks와 상관은 없다. 모듈 가져오는 방식)

import React, { Component } from 'react';

// ....

export default Example;

class 선언하던 부분, Component도 필요없어졌다.

import React from 'react';

const Example = () => {

};    

export default Example;

state부분을 useState를 사용하는 방식으로 수정하고 import해오는 부분을 수정해준다.

// useState 추가
import React, { useState } from 'react';

const Example = () => {

	// state 선언
	const [value, setValue] = useState('');
    
    //....
};    

export default Example;

사용하거나 셋팅할때는 아래와 같이 한다.

import React, { useState } from 'react';

const Example = () => {
	const [value, setValue] = useState('');
	
    // setValue를 사용해서 세팅
    const changeValue = (e) => {
    	setValue(e.target.value);
    };
    
    // render가 없어도된다.
    return(
    	<>
       		// this없이 사용가능
			<div>{value}</div>        
        </>
    );
};    

export default Example;

ref 까지 수정

// useRef를 추가로 import 해온다.
import React, { useState, useRef } from 'react';

const Example = () => {
	const [value, setValue] = useState('');
    
    // null 초기 값 설정
	const inputEl = useRef(null);
    
    const changeValue = (e) => {
    	setValue(e.target.value);
    };
    
    // focus 접근할때 꼭 current를 잡아준다.
    inputEl.current.focus();
    
    return(
    	<>	
        	<form>
				<input type="text" ref={inputEl} />            
            </form>
			<div>{value}</div>        
        </>
    );
};    

export defualt Example;

여기서 수정하다보면 컴파일러가 html과 jsx를 혼동할 수 있다.

class -> className

input의 for -> htmlFor 등의 예약어로 대체해줘야한다.