HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
🙂
동근팀/
📚
학습 주제 목록/
🐶
React 최상위 API
🐶

React 최상위 API

작성자
유지영
발표일
Dec 23, 2022
No
19

엘리먼트 변환

  • cloneElement()
  • isValidElement()
  • React.Children
 
 

cloneElement()

element를 기준으로 새로운 React 엘리먼트를 복사하고 반환.
config는 key와 ref, 새로운 props를 포함하며 새로운 엘리먼트에는 원본 엘리먼트가 가졌던 props와 새로운 props 가 얕게 합쳐진다.
 

isValidElement()

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

React.Children

:불투명 자료구조인 this.props.children을 다루는 유틸리티 함수들을 제공한다.
 
불투명 자료구조란? 구체적인 데이터구조가 정의되지 않은 자료구조를 의미한다.
 
  • React.Children.map
children에 포함된 자식에 대하여 함수를 호출하여 반환하는 값들을 배열로 생성한다.
children이 null또는 undefined일 경우 이 메서드는 배열이 아니라 null 또는 undefined를 반환하다.
 
💡
children이 Fragment일 경우 children은 단일 자식 취급되어 순회하지 않는다. (?)
 
  • React.children.forEach
map과 비슷하지만 배열을 반환하지 않는다.
 
  • React.Children.count
children에 포함된 컴포넌트의 개수를 반환
 
  • React.Children.only
children이 단 하나의 자식을 갖는지 확인하고 해당 자식 엘리먼트를 반환. 그렇지 않을 경우 오류를 발생시킨다.
 
💡
React.Children.only() 는 React.Children.map() 의 반환 값을 허용하지 않는다. 그 이유는 map의 반환 값은 React 엘리먼트가 아니라 배열이기 때문!
 
  • React.Children.toArray
각 자식에 고유의 key를 할당해서 1차원 배열로 변환하여 반환한다. children을 다시 정렬하거나 일부만 잘라내고 싶을 때 유용하다.
notion image
 
 
children
children
React.Children.toArray(children)
React.Children.toArray(children)
 
toArray 메서드를 사용할 경우 각 자식에게 고유한 key를 할당한다.
이러한 고유한 키는 children을 1차원 배열로 만들 때 중첩된 배열의 의미를 보존하기 위한 조치이다.
따라서 하나의 배열인 arr는 똑같이 keyrk .1로 시작한다!
 

React.Fragment

추가적인 DOM엘리먼트를 생성하지 않고 최상위 태그로 사용할 수 있다.
 
만약 <div> 를 사용하는 경우
notion image
이런 식으로 DOM에 div태그가 나타난다. 이런 것을 Fragment를 사용해서 방지할 수 있다.
 

축약 표현

축약 표현으로도 사용이 가능하다! 하지만 축약 표현의 key값을 설정할 수 없다.
 
React 최상위 API - React
React 컴포넌트를 사용하면 UI를 독립적이고 재사용할 수 있는 부분으로 나누고 각 부분을 분리하여 생각할 수 있습니다. React 컴포넌트는 React.Component 또는 React.PureComponent 로 세부적으로 나누어 정의할 수 있습니다. ES6 class를 사용하지 않는다면, create-react-class 모듈을 대신 사용해도 됩니다. 자세한 정보는 ES6 없이 React를 사용하기 문서에서 확인할 수 있습니다.
React 최상위 API - React
https://ko.reactjs.org/docs/react-api.html#cloneelement
React 최상위 API - React
 
React.cloneElement(
  element,
  [config],
  [...children]
)
React.isValidElement(object)
React.Children.map(children, function[(thisArg)])
React.Children.forEach(children, function[(thisArg)])
React.Children.count(children)
React.Children.only(children)
React.Children.toArray(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>
  );
};
import React, { Fragment } from 'react';

export default function Test (){
	return(
    	<Fragment>
        	<h1>Hello, world!</h1>
            <h2>React <h2>
        </Fragment>
    )
}
export default function Test (){
	return(
		<div>
			<h1>Hello, world!</h1>
			<h2>React <h2>
		</div>
	)
}
import React from 'react';

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