React Component: How They are Rendered and Behave in Browser

리액트에서 컴포넌트는 함수와 클래스의 형태로 정의될 수 있습니다.

• 함수형 요소(component as function)는 props 객체를 인자로 받아 리액트 원소를 반환하는 방식으로, 간결한 선언이 특징입니다.

• 자바스크립트의 ES6 클래스 문법으로 계급형 함수(component as class)를 정의할 수 있습니다. 이제는 잘 사용되지 않지만 몇 가지 추가 기능들을 활용할 수 있다는 장점이 있습니다.

함수/계급형 컴포넌트를 선언하는 코드

// decalre using function syntax
function Foo(props){
	return (
		<h1>Hello, {props.name}</h1>;	
	)
}
// declare using class syntax
class Food extends React.Component{
	render(){
		return <h1>Hello, {this.props.name}</h1>
	}
}

함수 요소를 클래스 요소로 변환하기

필요에 따라서 함수 컴포넌트를 클래스로 변환할 수 있습니다.

1. React.Component를 확장하는 동일한 이름의 ES6 클래스를 생성합니다.

2. render() 메서드를 추가합니다:

   function Foo(){
   	const [data, setData] = useState(null);
   }

3. 함수의 내용을 render() 메서드 안으로 이동합니다.

4. render() 메서드 내부의 props를 this.props로 변경합니다.

5. 더 이상 필요하지 않은 함수 선언을 제거합니다.

리액트에서 사용자 정의 컴포넌트의 이름은 항상 대문자로 시작해야합니다. 이는 리액트가 소문자로 시작하는 모든 컴포넌트를 DOM 태그로 처리하기 때문입니다.

React Rendering

리액트 엔진/리액트 DOM(react DOM/react engine)은 사용자가 정의한 컴포넌트를 실제 DOM 원소로 변환합니다. 이 과정을 리액트 렌더링(react rendering)이라고 합니다. 다음은 리액트 DOM이 컴포넌트를 실제 DOM 원소로 변환하는 과정에 대한 설명입니다:

1. 초기 렌더링(initial rendering)을 시작한다.

   1. ReactDOM.render() 또는 createRoot().render()를 통해 렌더링 프로세스를 호출합니다.

   2. 가상 DOM(virtual DOM) 즉 리액트 DOM을 구동시키고, 이는 주어진 코드를 읽어 컴포넌트 간의 계층 구조를 표현한 일종의 지도입니다.

   3. 이후, 실제 DOM과 비교하여 차이점을 확인합니다. 만약 가상 DOM과 실제 DOM 사이에 차이가 있다면, 실제 DOM을 갱신하여 두 DOM을 동기화해야 합니다.

2. 리-렌더링(re-rendering)을 호출한다.

   1. useState, useReducer 등을 통해 상태가 변경되었다면 해당 컴포넌트 또는 그 자식을 모두 다시 랜더링해야 합니다.

랜더링을 호출하는 코드

// Calling Renderer as Functional Component
function Greeting({name}) {
	return <h1>Hello, {name}</h1>;
}
// Calling Renderer as Class Component
class Greeting extends React.Component {
	render() {
		return <h1>Hello, {this.props.name}</h1>;
	}
}

Event Handling/Event Handler

리액트는 JSX에 사용자 정의 이벤트 핸들러를 추가할 수 있습니다. 이는 클릭, 호버, 포커스, 입력과 같은 사용자 동작에 반응하여 실행됩니다. 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 후, 이를 JSX 태그의 속성으로 전달해야 합니다:

1. 컴포넌트 내부 또는 외부에 handleClick 함수를 선언하여 원하는 동작을 구현합니다.

2. <button> 태그에 onClick={handleClick} 속성 정의를 추가합니다:

   // Wrtie it in pre-rendering area (Nested Function Pattern)
   export default function Button(){
   	function handleClick(){
   		alert("You clicked me!");
   	}
   	return(
   		<button onClick={handleClick}>
   			Click Me
   		</button>
   	);
   }
   
   // Write it in HTML element (Inline Pattern)
   function Button__(){
   	return (<button onClick={function handleClick()=>{alert("you clicked me!");}})></button>)
   }

특성(property)은 리액트에서 prop이라고 합니다. 함수 컴포넌트와 클래스 컴포넌트는 자신의 props를 수정할 수 없고, 수정해서도 안 됩니다. 함수가 실행되어도 입력값이 변하지 않는 것을 순수 함수라 하는데, props를 다루는 모든 함수는 이런 순수 함수처럼 동작해야 합니다.

이벤트 헨들러를 정의하는 컨벤션

이벤트 핸들러는 일반적으로 컴포넌트 내부에서 정의됩니다.

• handle로 시작하고 이벤트 이름으로 끝나는 명명 규칙을 따르는 것이 좋습니다.

  • 예시: onClick={handleClick}, onMouseEnter={handleMouseEnter}

이벤트 핸들러를 통해 특성을 읽기

이벤트 핸들러는 컴포넌트 내부에서 정의되므로 해당 컴포넌트의 props에 자연스럽게 접근할 수 있습니다. 아래 예시를 통해 이벤트 핸들러에서 props를 읽는 방법을 살펴봅니다.

function AlertButton({message,children}){
	return (
		<button onClick={()=>(alert(message))}>
			{children}
		</button>
	);//nest
}
export default function Toolbar(){
	return(
		<div>
			<AlertButton message="Playing!">
				Play Movie
			</AlertButton>
			<AlertButton message="Uploading!">
				Upload Image
			</AlertButton>
		</div>
	);//nest
}

이벤트 핸들러를 통해 특성을 전파하기

부모 컴포넌트에서 자식 컴포넌트의 이벤트 핸들러를 제어하려면 props를 통해 전달하면 됩니다. 도구창 요소는<PlayButton>과<UploadButton>을 렌더링하는데,handlePlayClick()을onClick()특성으로 <Button>에 전달합니다. 후자의 경우 인라인 함수를onClick()특성을 통해 <Button>에 전달합니다.

function Button({onClick,children}){
  return(
      <button onClick={onClick}> {children} </button>
  );//nest
}
function PlayButton({movieName}){
  function handlePlayClick(){
    alert("Playing ${moiveName}");
  }
  return(
      <Button onClick={handlePlayClick}>Play {movieName} </Button>
  );//nest
}
function UploadBUtton(){
  return (
      <Button onClick={()=>alert("uploading")}> upload image </Button>
  );//nest
}
function UploadBUtton(){
  return (
      <PlayButton movieName="Kiki's Delivery Service"/>
      <UploadButton/>
  );//nest
}