1
<DataProvider render={data => <h1>Hello {data.target}</h1>} />

1
import React, { useState } from 'react'
2
import styled from 'styled-components'
3

4
// 마우스가 움직일 때마다 좌표를 알 수 있는 Mouse 컴포넌트
5
export default function Mouse() {
6
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
7

8
  const handleMouseMove = event => {
9
    setMousePosition({ x: event.clientX, y: event.clientY })
10
  }
11

12
  return (
13
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
14
      <Image position={mousePosition} />
15
      Mouse X = {mousePosition.x} Y = {mousePosition.y}
16
    </div>
17
  )
18
}
19

20
// styled components 라이브러리를 사용해서 이미지 대신 사용함
21
const Image = styled.div`
22
  width: 30px;
23
  height: 30px;
24
  background-color: red;
25
  position: absolute;
26
  left: ${({ position }) => position.x}px;
27
  top: ${({ position }) => position.y}px;
28
`

1
import Mouse from './components/renderProps/Mouse'
2
import Image from './components/renderProps/Image'
3

4
export default function App() {
5
  return (
6
    <div>
7
      {/* Mouse 컴포넌트에 render props로 렌더링 할 컴포넌트를 넘김 */}
8
      <Mouse render={position => <Image position={position} />} />
9
    </div>
10
  )
11
}

1
import React, { useState } from 'react'
2

3
// 1. props로 render를 받음
4
export default function Mouse({ render }) {
5
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
6

7
  const handleMouseMove = event => {
8
    setMousePosition({ x: event.clientX, y: event.clientY })
9
  }
10

11
  return (
12
    <div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>
13
      {render(mousePosition)}
14
      마우스의 X좌표 = {mousePosition.x}, Y좌표 = {mousePosition.y}
15
    </div>
16
  )
17
}