이벤트

react의 이벤트는 js의 이벤트와 유사하지만 몇가지 다른 부분이 있다.

• 합성 이벤트 객체 사용
  Synthetic Envent (합성 이벤트) 라고 하며, 이벤트 헨들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼인 syntheticEvent 객체를 전달받는다. 가볍게는, 바닐라 js와 react는 서로 다른 event 객체를 갖고 있구나 라고 생각하면 된다.

• 이벤트 네이밍
  react의 이벤트 네이밍은 기존의 html과는 약간 다르다. react에서의 이벤트 이름은 camelCase로 작성되며, 소문자 대신 대문자로 시작한다. 예를 들어, html에서의 onclick은 react에서는 onClick으로 작성된다

• 기본 동작 방지 기능
  또한 react에서는 이벤트에서 false 를 반환해도 기본 동작을 방지할 수 없다. 반드시 event.preventDefault();를 명시적으로 호출해야 한다.

• 이벤트 핸들러 전달
  react에서 이벤트 핸들러를 전달할 때는 함수의 이름만을 넘기거나 내부에 함수를 작성하여 직접 넣어도 된다. 이때 함수는 호출되지 않은 상태로 전달되어야 한다. 바닐라 js에서는 이벤트 함수를 만든 뒤, 이를 addEventListner를 통해 해당 이벤트를 발생시키는 지점과 연결을 시켜줘야 했지만, react에서는 이 작업이 필요하지 않으므로 편리하다.

    const handleClick = () => {};

    <button onClick={handleClick}>Click me</button>				// 가능
    <button onClick={() => {}}>Click me</button>				// 가능
    <button onClick={handleClick()}>Click me</button>			// 불가능
	<button onClick={() => helloUser('Mark')}>Click me</button>
	// 인자가 있는 함수인 경우 위와 같이 가능

버블링과 캡쳐링

이벤트 버블링이란 자식에서의 이벤트가 부모 컴포넌트로 전달하는 것을 뜻하고, 캡쳐링은 부모가 내 자식들 중 누가 이벤트가 발생되었는지 확인하는 체크과정이다. 캡쳐링 후에 버블링이 일어나는 순서이다.

순서를 결정할 때, 기본적으로 DOM 트리의 구조를 따라 이벤트 전파의 순서를 따른다. 버블링은 이벤트 핸들러가 최하위 요소에서 시작하여 상위 요소로 이벤트를 전파하는 방식이며, 캡처링은 이벤트 핸들러가 최상위 요소에서 시작하여 하위 요소로 이벤트를 전파하는 방식이다.

호출 순서를 아래의 예제를 통해 살펴보자.

<div onClickCapture={handleClickCapture}>
  <div onClickCapture={handleClickCapture2} onClick={handleClickBubble}>
    <button onClick={handleButtonClick}>Button</button>
  </div>
</div>

부모의 onClickCapture -> 중간 자식 div의 onClickCapture -> 자식 button의 onClick -> 중간 div의 onClick 순으로 실행된다.

일반적으로는 사용하는 방법은 버블링 방식이며, 캡쳐링을 사용하는 상황은 드물다.

---

조건부 렌더링 (Conditional Rendering)

특정 조건에 따라 다른 컴포넌트나 JSX 요소를 렌더링하는 기술을 의미한다. 이를 통해 사용자 인터페이스를 동적으로 변경하거나 상황에 따라 다른 내용을 표시할 수 있다.
조건부 렌더링을 하는 방법에는 if로 return 구문을 나누기도하고, && (단축 평가) 나 삼항연산자를 통해 나누는 방법이 있다.

// if 방법
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  if (isLoggedIn) {
   	return (
      	<div>
          <button onClick={() => setIsLoggedIn(false)}>Log Out</button>
          <span>Welcome!</span>
      	</div>
     );
  } 
  
  return (
  	<div>
        <button onClick={() => setIsLoggedIn(true)}>Log In</button>
    </div>      
  );
}


// 삼항 연산자 방법
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);

  return (
    <div>
      {isLoggedIn ? (
        <button onClick={() => setIsLoggedIn(false)}>Log Out</button>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Log In</button>
      )}

      {isLoggedIn && <span>'Welcome!'</span>}
    </div>
  );
}

조건부 렌더링은 위와 같이 여러 상황에서 사용될 수 있다. 예를 들어 로그인 여부, 데이터의 유무, 사용자의 권한, 데이터 패칭 중의 로딩 상황 등에 따라 다른 컴포넌트를 보여주거나 숨기는 등의 동적인 UI를 구현할 때 유용하다.

각각의 장단점?

if

• 장점
  복잡한 조건을 다루기에 적합하며, 조건에 따라 특정 렌더링 로직을 수행하거나 여러 줄의 JSX를 렌더링할 수 있다.

• 단점
  코드가 길어지고 번잡해질 수 있어 이에 따른 가독성 문제가 나타난다.

삼항 연산자

• 장점
  간결한 문법으로 코드를 작성할 수 있으며 JSX 내에서 바로 사용할 수 있어서 코드의 가독성이 좋아진다

• 단점
  코드가 긴 내용을 삼항연산자를 사용하면 오히려 가독성이 떨어질 수 있다. 또한 조건이 성립하지 않더라도 항상 JSX 요소가 생성된다.

일반적으로는 간단한 조건을 다루는 경우에는 삼항 연산자를 사용하는 것이 코드의 간결성을 유지하면서도 충분히 가독성 있을 수 있다. 그러나 조건이 복잡하거나 여러 줄의 JSX를 다뤄야 하는 경우에는 if 문을 사용하여 가독성을 높일 수 있다. 가독성과 코드 유지보수성을 고려하여 상황에 맞게 적절한 방법을 선택하는 것이 좋다.