Portfolio

엘리먼트 변환

cloneElement()

isValidElement()

React.Children

cloneElement()


React.cloneElement(
  element,
  [config],
  [...children]
)

element를 기준으로 새로운 React 엘리먼트를 복사하고 반환.

config는 key와 ref, 새로운 props를 포함하며 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props와 새로운 props 가 얕게 합쳐진다.

isValidElement()


React.isValidElement(object)

객체가 React 엘리먼트인지 확인해서 true 혹은 false를 반환한다.

React.Children

:불투명 자료구조인 this.props.children을 다루는 유틸리티 함수들을 제공한다.

불투명 자료구조란? 구체적인 데이터구조가 정의되지 않은 자료구조를 의미한다.

React.Children.map


React.Children.map(children, function[(thisArg)])

children에 포함된 자식에 대하여 함수를 호출하여 반환하는 값들을 배열로 생성한다.

children이 null또는 undefined일 경우 이 메서드는 배열이 아니라 null 또는 undefined를 반환하다.

💡

children이 Fragment일 경우 children은 단일 자식 취급되어 순회하지 않는다. (?)

React.children.forEach


React.Children.forEach(children, function[(thisArg)])

map과 비슷하지만 배열을 반환하지 않는다.

React.Children.count


React.Children.count(children)

children에 포함된 컴포넌트의 개수를 반환

React.Children.only


React.Children.only(children)

children이 단 하나의 자식을 갖는지 확인하고 해당 자식 엘리먼트를 반환. 그렇지 않을 경우 오류를 발생시킨다.

💡

React.Children.only() 는 React.Children.map() 의 반환 값을 허용하지 않는다. 그 이유는 map의 반환 값은 React 엘리먼트가 아니라 배열이기 때문!

React.Children.toArray


React.Children.toArray(children)

각 자식에 고유의 key를 할당해서 1차원 배열로 변환하여 반환한다. children을 다시 정렬하거나 일부만 잘라내고 싶을 때 유용하다.


import React from "react";

export default function Sample({ children }) {
  console.log(children);
  console.log(React.Children.toArray(children));
  return children;
}


import Sample from "../components/sample/Sample";

export default {
  title: "components/Sample",
  component: Sample,
};

const arr = [
  { id: 1, fruits: "banana" },
  { id: 2, fruits: "apple" },
  { id: 3, fruits: "cherry" },
];

export const Default = () => {
  return (
    <Sample>
      <div fruits="mango">mango</div>
      {arr.map((value) => (
        <li key={value.id}>{value.fruits}</li>
      ))}
    </Sample>
  );
};

toArray 메서드를 사용할 경우 각 자식에게 고유한 key를 할당한다.

이러한 고유한 키는 children을 1차원 배열로 만들 때 중첩된 배열의 의미를 보존하기 위한 조치이다.

따라서 하나의 배열인 arr는 똑같이 keyrk .1로 시작한다!

React.Fragment

추가적인 DOM엘리먼트를 생성하지 않고 최상위 태그로 사용할 수 있다.


import React, { Fragment } from 'react';

export default function Test (){
	return(
    	<Fragment>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </Fragment>
    )
}

만약 <div> 를 사용하는 경우


export default function Test (){
	return(
		<div>
			<h1>Hello, world!</h1>
			<h2>React <h2>
		</div>
	)
}

이런 식으로 DOM에 div태그가 나타난다. 이런 것을 Fragment를 사용해서 방지할 수 있다.

축약 표현


import React from 'react';

export default function Test (){
	return(
    	<>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </>
    )
}

축약 표현으로도 사용이 가능하다! 하지만 축약 표현의 key값을 설정할 수 없다.

React 최상위 API - React

React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있습니다. React 컴포넌트는 React.Component 또는 React.PureComponent 로 세부적으로 나누어 정의할 수 있습니다. ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다. 자세한 정보는 ES6 없이 React를 사용하기 문서에서 확인할 수 있습니다.

https://ko.reactjs.org/docs/react-api.html#cloneelement