... operation (js 점 세 개 기능)

졸업 작품에서 twine이라는 오픈소스를 뜯어 고치는 중 발견한 ... operation

 

export const CodeArea: React.FC<CodeAreaProps> = props => {
	const {fontFamily, fontScale, label, ...otherProps} = props;
    
    //중간 생력
    
    return (
    	//중간 생략
    	<CodeMirror {...otherProps} />
    )
 }

위와 같은 코드였다.

 

여기서 ...otherProps는 앞에 있는 props들의 묶음 역할을 한다고 볼 수 있다.

 

코드의 가독성을 위한 기능으로 CodeMirror에 {...otherProps} 는 곧

<CodeMirror fontFamily={this.props.fontFamily} fontScale={this.props.fontScale} label={this.props.label} />

위와 같은 기능을 한다고 한다.

 

출처

https://stackoverflow.com/questions/31048953/what-are-these-three-dots-in-react-doing#:~:text=(three%20dots%20in%20JavaScript)%20is,to%20be%20expanded%20wherever%20placed. 

 

 

return [
				...state,
				{
					collapsed: false,
					component: action.component,
					highlighted: false,
					maximized: false,
					props: action.props
				}
			];

위와 같은 형태로도 사용된 적 있었는데, 이는 state안에 다른 객체들이 들어가 있고, 마지막에 객체를 추가하는 코드였다.

 

즉, [{}, {}, {} ... ] 형태인 셈이다.