(12)React_초급_React가 랜더링하는 방식, React_Design_1_인라인스타일

● 알아야 하는 개념 2가지 : 

React의 Rendering과 Virtual DOM 간략 설명

1. Rendering

React에서 렌더링은 UI를 업데이트하거나 새로 그리는 과정입니다.

• 초기 렌더링 (Initial Rendering):
  • 애플리케이션이 처음 실행될 때 React 컴포넌트 트리를 기반으로 Virtual DOM을 생성하고, 이를 실제 DOM으로 변환하여 브라우저에 그립니다. //Html 작동 방식과 다르다.(얘는 그냥 초가 DOM을 기반으로 브라우저 그린다.)
• 리렌더링 (Re-rendering):
  • 컴포넌트의 상태(state)나 속성(props)이 변경되면 React는 해당 컴포넌트와 관련된 UI를 다시 그립니다. //Html 는 수정 된후 , 다시 처음부터 렌더링을 한다. (쓸데없는 낭비가 많다는 뜻이다.)

---

2. Virtual DOM

Virtual DOM은 React가 DOM 업데이트를 효율적으로 관리하기 위해 사용하는 가상 메모리 상의 DOM 구조입니다.
실제 DOM과 동기화(sync)되는 방식으로 작동하며, 성능 향상을 위해 고안되었습니다.

• 왜 Virtual DOM을 사용하는가?
  • 실제 DOM 조작은 느리고, 특히 복잡한 애플리케이션에서는 성능 저하의 주요 원인이 됩니다.
  • React는 Virtual DOM을 사용해 변경 사항을 미리 계산하고 최소한의 DOM 조작만 수행함으로써 성능을 최적화합니다.

---

3. Virtual DOM의 동작 원리

1. 렌더링 트리 생성:
   • React는 컴포넌트 트리를 기반으로 Virtual DOM을 생성합니다.
2. 변경 사항 비교:
   • 상태나 속성이 변경되면 React는 새 Virtual DOM을 생성하고, 기존 Virtual DOM과 비교합니다.
     이를 **"Diffing 알고리즘"**이라고 합니다.
3. 최소 변경 적용:
   • 실제 DOM에서 변경이 필요한 부분만 업데이트합니다.
     이 과정을 **"Reconciliation"**이라고 합니다.

---

4. React Rendering & Virtual DOM 동작 과정

• 초기 렌더링:
  1. React는 컴포넌트 트리를 읽어 Virtual DOM을 생성합니다.
  2. Virtual DOM을 실제 DOM에 반영합니다.
• 상태 변경 후:
  1. 새로운 Virtual DOM을 생성합니다.
  2. 기존 Virtual DOM과 새로운 Virtual DOM을 비교(diffing).
  3. 실제 DOM에서 변경이 필요한 부분만 수정합니다.

---

5. 장점

• 빠른 업데이트:
  변경 사항만 실제 DOM에 반영하므로 불필요한 DOM 업데이트를 방지합니다.
• 효율적인 렌더링:
  전체 DOM을 다시 그리지 않으므로 성능이 개선됩니다.
• 개발 생산성:
  React는 Virtual DOM과 diffing 과정을 자동으로 처리하므로, 개발자는 UI 상태와 렌더링 로직에만 집중할 수 있습니다.

---

비유로 이해하기

• 실제 DOM:
  책의 모든 페이지를 매번 지우고 다시 쓰는 작업처럼 느림.
• Virtual DOM:
  책의 바뀐 부분만 표시한 초안을 먼저 작성하고, 변경된 부분만 실제 책에 적용하는 방식.

● React에 CSS 스타일 적용하기 : 

○ Ex_ "던지기" , "처음부터" 버튼에 스타일 적용하기

순서1_ Button컴포넌트에 해당되는 Button.js에 들어가 const style의 객체 선언

//JavaScript 객체 형태로 해당 style 속성의 속성값 대입
const baseBtnStyle = {
	padding : '14px 27px',
    //style속성명 : '속성값' , : 연결 연산자 ','
    outline : 'none,
    cursor : 'pointer'
    borderRadius : '9999px', //이떄 속성명은 JSX문법에 따라 카멜Case로 한다.
    fontSize : '17px',
};

function Button({ color, children, onClick }) {
  return (
    <button style={style} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

순서2_ "던지기"버튼 : blue , "처음부터"버튼 : red 로 추가 적용하기

//JavaScript 객체 형태로 해당 style 속성의 속성값 대입
const baseBtnStyle = {
	padding : '14px 27px',
    //style속성명 : '속성값' , : 연결 연산자 ','
    outline : 'none,
    cursor : 'pointer'
    borderRadius : '9999px', //이떄 속성명은 JSX문법에 따라 카멜Case로 한다.
    fontSize : '17px',
};

//던지기 버튼 style 객체
const blueBtnStyle = {
	...baseBtnStyle, //spread문법으로 기존 적용 style 적용
    border : 'solid 1px #7090ff',
    color : '#7090ff',
    backgroundColor : 'rgba(0, 89, 255, 0.2)',
};
//처음부터 버튼 style 객체
const redButtonStyle = {
  ...baseButtonStyle,
  border: 'solid 1px #ff4664',
  color: '#ff4664',
  backgroundColor: 'rgba(255, 78, 78, 0.2)',
};


function Button({ color, children, onClick }) {
  return (
    <button style={style} onClick={onClick}>
      {children}
    </button>
  );
}

export default Button;

순서3_ Button 컴포넌트 function 내에서 props.color프로퍼티 속성값 'blue' || 'red'값에 따라 스타일객체 적용하기

function Button({ color, children, onClick }) {
	//삼항 연산자로 props.color에 따라 다르게 style변수에 style 객체 저장
    const style = (color === 'red')? redBtnStyle : blueBtnStyle ;
    

  return (
    <button style={style} onClick={onClick}>//button의 style 속성에 직접 대입 적용
      {children}
    </button>
  );
}

export default Button;

○ 출력 결과

 

◎ 연습문제 :

이번엔 앞에서 만든 HandButton에 디자인을 입혀보겠습니다.

아래 CSS 코드를 참고해서 인라인 스타일로 디자인을 적용해 보세요.

배경 이미지의 주소는 아래 코드처럼 문자열로 고정된 값이 아니라, import 로 이미지 파일을 불러온 값을 사용해야 합니다.

.HandButton {
  width: 166px;
  height: 166px;
  border: none;
  outline: none;
  text-align: center;
  cursor: pointer;
  background-color: transparent;
  background-image: url('./assets/purple.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

실습 결과

※ 풀이과정 :

순서1_ <HandButton> 컴포넌트 파일인 , HandButton.js에 이미지 파일 경로를 변수화 한다.

import HandBtnImg from './assets/purple.svg';

순서2_ style 변수명으로 객체 초기화 + 문제 조건의 객체를 JSX문법으로 바꿔서 작성

// 인라인 스타일을 적용해 주세요
const style = {
  width: "166px",
  height: "166px",
  border: "none",
  outline: "none",
  textAlign: "center",
  cursor: "pointer",
  backgroundColor: "transparent",
  backgroundImage: `url(${PurpleBtn})`, 
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "contain",
};

• 변수명 : style의 객체
• 대입 연산자 : ':'
• 연결 연산자 : ','
• backgroundImage 에 url(이미지경로시) : `url(${이미지경로변수})`

backgroundImage: `url(${PurpleBtn})`, // 올바른 템플릿 리터럴 사용

순서3_ 해당 스타일 시트를 <HandButton>컴포넌트 내 <button> 태그에 적용

function HandButton({ value, onClick }) {
  const handleClick = () => onClick(value);
  return (
    <button style={style} onClick={handleClick}>
      <HandIcon value={value} />
    </button>
  );
}