리액트 확장 프로그램 추가 및 컴포넌트 최적화 하기

📥React Developer Tools 다운로드 하기

이렇게 하면 input에 값 입력할 때마다 하이라이트 되는 것을 확인 할 수 있음👀
어떤 컴포넌트가 렌더링 되는 지 알 수 있음어떤 컴포넌트에 props가 어떤 것들이 있고 전체적인 구조도 잘 보여줌컴포넌트 렌더링 될 때 하이라이트 설정 하고 싶을 때 체크✅

---

🧩컴포넌트 최적화 하기🔥

📁바탕화면에 폴더 생성하기 : react-performance-app

📥현재 폴더 안에 리액트 설치하기 : npx create-react-app ./

⬆ 이걸 사용해서 컴포넌트를 나눴을 때랑
하나를 통으로 사용했을 때와 과연 어떤게 성능이 좋은지 봐보자 ❗

📁src>components>A.js & B.js 만들기

import React from 'react'

const A = () => {
  	return (
      	<div>A</div>
    )
}
export default A;

import React from 'react'

const B = () => {
  	return (
      	<div>B</div>
    )
}
export default B;

🐱‍💻react 실행하기 : npm run start

App.js

import './App.css';
import A from './components/A';
import B from './components/B';

function App() {
  // input
  const [value, setValue] = useState('');
  
  return (
    <div style={{ padding: '1rem' }}>
      <input 
      	value={value}
        onChange={e => setValue(e.target.value)}
      />
      
      {/* 왼쪽에서 오른쪽으로 */}
      <div style={{ display: 'flex' }}>
        <A />
        <B />
      </div>
    </div>
  );
}
export default App;

e.target.value 하면 input 값이 useState에 저렇게 들어가게 됨

💁‍♀️데이터 가져오기

'jsonplace holder'➡api 제공 해주는 곳❗
여기에 요청 보내면 user/post 정보 이러한 더미 데이터들을 다 전달해줌🙆‍♀️

🤷‍♀️요청 어떻게 보낼까❓➡useEffect🔥

import './App.css';
import A from './components/A';
import B from './components/B';

function App() {
  // input
  const [value, setValue] = useState('');
  // 컴포넌트 안에서 json 데이터 기억하고 싶어서 state 사용
  const [posts, setPosts] = useState([]);
 
  useEffect(() => {
    // 컴포넌트가 처음 화면에 렌더링될 때만 실행되는 효과
    // API로부터 데이터를 가져오기 위해 fetch 함수를 호출합니다
    fetch('https://jsonplaceholder.typicode.com/posts')
        // 응답이 오면 JSON 형식으로 변환합니다
        .then(response => response.json())
        // 변환된 JSON 데이터를 'posts'로 받아와서 상태에 저장합니다
        .then(posts => setPosts(posts)) // setPosts 사용해 받아온 posts 데이터를 상태에 저장
    	
  }, [])
  
  return (
    <div style={{ padding: '1rem' }}>
      <input 
      	value={value}
        onChange={e => setValue(e.target.value)}
      />
      
      {/* 왼쪽에서 오른쪽으로 */}
      <div style={{ display: 'flex' }}>
        {/* A&B 컴포넌트에 데이터 내려주기 */}
        <A message={value} posts={posts} />
        <B message={value} posts={posts} />
      </div>
    </div>
  );
}
export default App;

여기다 요청을 보내면이러한 JSON 형식의 데이터를 전달해줌

⬆ A & B 컴포넌트에 똑같이 만들어줄건데
input에 타이핑을 하면 그 값이 A와 B 컴포넌트에 똑같은 값들이 들어가게 할 것❗

A.js

import React from 'react'

// props 받아옴
const A = ({ message, posts }) => {
  	return (
      	<div>
       	 	<h1>A Component</h1>
        	<p>{message}</p>
            <ul>
              {posts.map(post => {
                return (
                  <li key={post.id}>
                    <p>{post.title}</p>
                  </li>
                )
              })}
            </ul>
      	</div>
    )
}
export default A;

B.js

import React from 'react'

// 자녀 컴포넌트
const Message = ({ message }) => {
  return <p>{message}</p>
}

const ListItem = ({ post }) => {
  return (
    <li key={post.id}>
      <p>{post.title}</p>
    </li>
  )
}

const List = ({ posts }) => {
  return (
    <ul>
      {posts.map(post => {
        return (
          <ListItem key={post.id} post={post} />
        )
      })}
    </ul>
  )
}

// 부모 컴포넌트
const B = ({ message, posts }) => {
  	return (
      	<div>
       	 	<h1>B Component</h1>
        	<Message message={message} />
        	<List posts={posts} />
      	</div>
    )
}
export default B;

⬆ A는 통째로 B는 컴포넌트 나눠서 한 것 ❗

🤷‍♀️A & B 컴포넌트 중 성능 누가 더 좋은지 비교🔥

👀Profiler에서 성능 비교해보기🔍🔴 클릭 시 recording됨
컴포넌트가 다시 렌더링 될 때마다 recording 되는 것input 창에 hello 치고 🔴누르면 5번이 나옴 ( ⬅ h e l l o )
다시 렌더링 될 때마다 프로파일러가 기록을 한 것✅

🤔B(나눈애)보다 A(통째로 한 애)가 더 성능 좋은 이유❓

👉 컴포넌트 렌더링 최적화 안 되어 있기 때문💡
베타로 19버전 나왔는데 이건 임의로 리액트 compiler가 스스로 최적화 해줌
아직까진 최적화를 자동으로 해주진 않음🙅‍♀️ ( 임의로 최적화 해줘야 함 )

message 부분만 렌더링 돼야 하는데 타이핑 칠 때마다 listItem하고 List들이 렌더링 돼서 성능⬇

💁‍♀️해결 방법➡컴포넌트들을 React.memo 사용하기✨

👉 React.memo로 컴포넌트 감싸면 끝🔥

B.js

import React from 'react'

// 자녀 컴포넌트
const Message = React.memo(({ message }) => {
  return <p>{message}</p>
})

const ListItem = React.memo(({ post }) => {
  return (
    <li key={post.id}>
      <p>{post.title}</p>
    </li>
  )
})

const List = React.memo(({ posts }) => {
  return (
    <ul>
      {posts.map(post => {
        return (
          <ListItem key={post.id} post={post} />
        )
      })}
    </ul>
  )
})

// 부모 컴포넌트
const B = ({ message, posts }) => {
  	return (
      	<div>
       	 	<h1>B Component</h1>
        	<Message message={message} />
        	<List posts={posts} />
      	</div>
    )
}
export default B;

B Component에서 하나하나 하이라이트 됐던 것들이 이제는 안그럼😮
이젠 필요한 부분만 렌더링 됨👍

⬆ A보다 B 컴포넌트가 더 성능 좋음🔥