TIL 40: [React] 컴포넌트 디자인

오늘은 어제 마저 다하지 못한 Advanced 부분을 다 풀었습니다. 지금 계속 머릿속에서 맴도는 건 {},,,

{} 때문에 적어도 두 시간은 사용한 것 같네요😂 다른 부분이 잘못된 줄 알고 useState로 clicked 를 추가해주기도 했는데, 내용이 문제가 아니라 형식의 문제였다는 점에서 다시 한 번 암기도 중요하다는 것을 깨달았습니다.

오늘도 하루종일 Sprint를 풀었기 때문에 하면서 정리하고 싶었던 부분들을 추가적으로 정리해보도록 하겠습니다.

 

 

 

화살표 함수

처음에는 화살표 함수에서 표현식 부분을 {}로만 감싸줬었는데 이부분에서 오류가 났었습니다. 아예 {}를 감싸주지 않거나 그 안에 return문을 넣어줬어야 했는데 이도저도 아니게 반반 섞어줘서 아래 Dropdown이 나타나지 않았습니다.
그래서 페어분이랑 저는 문제를 해결할 수 있는 부분에서 계속 찾아봤지만 내용상 잘못된 부분은 없어서 형식까지 비교하다 보니 결국 오류를 바로잡을 수 있었습니다. 아래의 표현이 올바른 화살표 함수의 사용 방식입니다.

 

 

 

Focus Events

onFocus

엘리먼트가 focus 속성을 받게 되면 onFocus 이벤트 실행됩니다. 예를 들어, 사용자가 텍스트 입력창을 클릭했을 때 onFocus 이벤트가 실행됩니다.

onBlur

엘리먼트가 focus 속성을 더 이상 갖지 않게되면 이벤트가 실행됩니다. onFocus와 반대되는 개념입니다. 예를 들어, 사용자가 focus가 텍스트 창의 바깥 부분을 클릭했을 때 onBlur 이벤트가 실행됩니다. 아래와 같이 코드를 사용할 수 있습니다.

<InputBox>
  {isEditMode ? (
    <InputEdit
      type='text'
      value={newValue}
      ref={inputEl}
      onBlur = {handleBlur} //포커스를 잃으면 메소드 실행
      onChange = {handleInputChange}
    />
  ) : (
    <span onClick = {handleClick}
    >{newValue}</span>
  )}
  </InputBox>

 

 

 

버블링과 캡처링

버블링은 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가는 것을 말합니다.

다른 말로는 이벤트가 발생한 요소부터 window까지 이벤트를 전파합니다. (하위 → 상위)

발생하는 모양이 물속 거품(bubble)과 닮았기 때문에 버블링이라고 합니다.

아래의 HTML 코드를 보면 FORM > DIV > P 형태로 중첩된 구조로 이루어져 있습니다. 여기서

를 클릭하면 <p>에 할당된 onclick 핸들러가 동작합니다. 이후 바깥의 <div>에 할당된 핸들러가 동작합니다. 다음에는 그 바깥의 <래그>에 할당된 핸들러가 동작합니다. 이렇게 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

<form onclick="alert('form')">FORM 
  <div onclick="alert('div')">DIV 
    <p onclick="alert('p')">P</p> 
  </div> 
</form>

onclick과 같은 거의 모든 이벤트는 버블링이 됩니다. 참고로 focus 이벤트와 같이 버블링이 되지 않는 이벤트도 있습니다.

버블링을 중단하기 위해서는 stopPropagation() 을 사용하면 됩니다. 아래와 같이 <p>에 stopPropagation을 하면 <p>의 부모 요소인 div와 form의 onclick은 동작하지 않습니다.

<form onclick="alert('form')">FORM 
  <div onclick="alert('div')">DIV 
    <p onclick="event.stopPropagation()">P</p> 
  </div> 
</form>

 

캡처링은 버블링과 반대로 이벤트가 하위 요소로 전파되는 단계를 말합니다. 

다른 말로는 window로부터 이벤트가 발생한 요소까지 이벤트를 전파합니다. (상위 → 하위)

 

 

 

리액트 파트 공부한 지 오래되어서 많이 까먹은 것 같아 걱정을 많이 하고 있었습니다. 하지만 좋은 페어분도 만나고, Advanced 파트까지 풀면서 반복적으로 리액트를 사용하다보니 덕분에 빠르게 복습할 수 있어 좋았습니다😊