리액트 실전 활용

Higher Order Component(HOC)

HOC :

• 고차컴포넌트
• 리액트에서 컴포넌트 안에 있는 로직을 다시 재활용 할 수 있는 기술
• 리액트 api 와 관련 없음
• 컴포넌트를 상속받거나 재활용하는게 아닌 조합하는 리액트 컴포넌트의 본성에서 야기된 패턴
• Hook의 등장으로 사용이 줄어듬
  

여러 라이브러리에서 제공하는 hoc

• Reduct의 connect()
• Relay의 createFramentContainer()
• React의 withRouter() - 보통 with가 붙은 함수가 HOC인 경우가 많다
  

• Cross-Cutting-Concerns : 횡단 관심사

2. HOC에 인자로 들어가는 컴포넌트를 변경하지 않는다.
3. 직접 만든 props와 hoc가 만든 props 관련이 없는 props를
5. 쉬운 디버깅을 위해서 새로 들어온 컴포넌트에는 hoc

주의점

• hoc를 render()메소드 안에서 사용하지않는다.

• 인자로 들어간 컴포넌트의 Stactic 메소드는 copy되지 않기 때문에 새로 만들어진 컴포넌트에 새로 복사해서 넣는다.

Stactic method를 따로 분리

• ref의 위치를 알수 없기 때문에 ref를 통과시킬 수 없다.(feat. React.forwardRef)

Controlled Component와 Uncontrolled Component

npx create-react-app controlled-uncontrolled-example
cd controlled-uncontrolled-example
code . -r
npm start

Controlled Components

src => components => ControlledComponent.jsx 생성
ControlledComponent : 상태를 컴포넌트가 관리 = 컴포넌트가 가지고 있는 태그가 가진 상태를 지속적으로 동기화

import React from 'react
class ControlledComponent extends React.Component {
  	state = {
    	value:""
    }
  
	render () {
      	const {value} = this.state;
    	return (
        	<div>
          		<input value={value} />
          	</div>
        )
    }
}

export default ControlledComponent

=> App.js

function App() {
	...
	<ControlledComponent/>
}

=> onChange라는 이벤트 핸들러를 사용하지 않고 value라는 props를 사용하고 있다는 경고창 활성 => readOnly를 쓰든 defaultValue를 써라

src => components => ControlledComponent.jsx

import React from 'react
class ControlledComponent extends React.Component {
  	state = {
    	value:""
    }
  
	render () {
      	const {value} = this.state;
    	return (
        	<div>
          		<input value={value} onChange={this.change />
          		<button onClick={this.click} >전송 </button > 
          	</div> 
        )
    }
	change = (e) =>{
		console.log(e.target.value); // => 키보드로 친 내용이 한글자씩 e로 들어옴
                    
		this.setState({value: e.target.value})
	}
	click = () => {
    	console.log(this.state.value)              
	}
}

export default ControlledComponent

UncontrolledComponent

• ref사용

components => UncontrolledComponent.jsx

import React from 'react'

class UncontrolledComponent extends React.Components{
	inputRef = React.createRef();
  
	render() {
      	console.log('initial render', this.inputRef) 
      		// => ref객체. 최초 render시기에는 null
    	return (
        	<div>
          		// <input id='my-input' />
            	<input ref={this.inputRef}/>
            <button onClick={this.click} >전송 </button>
          	</div>
        )
    }
	componentDidMount() {
    	console.log('componentDidMount', this.inputRef
    } // mount 후에는 input을 참조
  	click = () =>{
      // input 엘리먼트의 현재 상태값(value)를 꺼내서 전송한다.
      // const input = document.querySelector('#my-input');
      // console.log(input) 
      // 가상돔이 아닌 리얼돔에 관여하는 방식이라 지양함 => ref사용
		console.log(this.inputRef.current.value)
          // 최초 render 후 button의 onClick 이벤트가 일어나면 mount후 ref에 저장된 참조 값을 불러옴
    }
}
export default UncontrolledComponent

=> App.js

function App() {
	...
	<ControlledComponent/>
    <UncontrolledComponent/>
}

ControlledComponent와 UncontrolledComponent의 사용처

ControlledComponent =>

• state가 변경될 때마다 상태를 확인하고 처리하고 싶을 때
  • ex) e-mail 적는 칸에서 경고메시지가 뜨다가 올바른 e-mail형식이 들어오는 순간 사라짐

UncontrolledComponent

• ref에 상태를 저장하고 있다가 필요한 경우 처리하고 싶을 땨
  • ex) 작성한 키워드에 마우스를 갖다대었을 때 해당 키워드에 맞는 팝업을 띄움.

https 요청하기

로컬 스토리지