패스트캠퍼스 메가바이트스쿨 Day 28 (6주차 수요일) -React 공식문서 뽀개기2 Event, Condition, List/key

1. Event

  const handleMouseLeave = (e) => {
    console.dir(e)
  }

• 리액트에서 이벤트를 다루는 방식은 조금 특별하다

• 직접 이벤트를 만드는게 아니라 SyntheticBaseEvent라는 이벤트와 유사한 역할을 하는 레퍼런스를 참조해서 이벤트를 다룸.

• 우리는 이를 합성이벤트(인터페이스는 같지만 직접 대응되지 않음)라고 부른다.
  

• 만약 브라우저 고유의 이벤트가 필요하다면 nativeEvent 어트리뷰트를 통해서 접근이 가능하다

• SynteticBascEvent > nativeEvent > type을 가면 고유 이벤트를 알 수 있다.

2. 캡쳐링과 버블링

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

• 캡쳐링은 부모요소에서부터 자식요소까지 가면서 이루어진다.
• 버블링은 자식요소에서부터 부모요소까지 올라가는 것.
• 따라서 이벤트가 진행되는 순서는 캡쳐링 -> target -> 버블링 순서대로 진행이 된다.
• 캡쳐링 단계에서 이벤트를 등록하려면 onClickCapture이런식으로 뒤에 Capture를 붙여야한다.
• 지원하는 이벤트 종류를 보면 대부분 캡쳐단계에서 Capture를 붙여야만 호출 될 수 있음.
• 현업에서 그렇게 많이 사용되는 개념은 아니나, 부모요소가 먼저 이벤트를 적용시키고자 할 때 사용될 수 있음.

3. Condition(조건부 렌더링)

• 조건부 렌더링은 특정 조건에 따라서 렌더링을 다르게 해주고 싶을 때 주로 사용하며, 자바스크립트의 if문과 비슷하다고 생각하면 된다.

function Greeting (props) {
  return props.isLoggedIn ? <UserGreeting name="timmy" count={0}/> : <GuestGreeting/>
}

export default function Condition() {
  const isLoggedIn = true
  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn}/>
    </div>
  )
}

• 조건부렌더링은 보통 삼항연산자로 짧게 나타내는데 if문으로 길게 써줘도 상관 없음.

function UserGreeting (props) {
  return <h1>{props.name && `${props.name},`} Welcome {props.count ? `It's ${props.count} times` : null}</h1>
  // return <h1>{props.name && `${props.name},`} {Boolean{props.count} && `It's ${props.count} times`}</h1>
}

• 주로 사용하는 && 연산자를 사용해서, true나 false값을 반환할수도 있다.

function UserGreeting (props) {
  return <h1>{props.name && `${props.name},`} Welcome {props.count ? `It's ${props.count} times` : null}</h1>
  // return <h1>{props.name && `${props.name},`} {Boolean{props.count} && `It's ${props.count} times`}</h1>
}

• 위와 같이 UserGreeting 컴포넌트에서도 조건에 따라 다른 값을 부여해주고 싶을 때 삼항연산자를 넣은 문장 자체를 return할 수 있다
• 이 때, props.count가 0이라면 falsy한 표현이기 때문에 0자체가 반환이 된다.
• 따라서 0일 때 아예 false로 인식해서 반환하고 싶지 않을 때는 삼항연산자를 통해서 확실하게 null로 해주거나 boolean을 붙여줘서 false로 바꿔주면 된다.

4. List와 Key

🚀Map 활용

  const numbers = [1,2,3,4,5];
  return (
    <ul>
      {numbers.map((item) => (
        <li key={item.toString()}>{item}</li>
      ))}
    </ul>
  )

• map의 결과값 자체로 개별적으로 엘리먼트를 형성하는 것도 가능하다.
• 여기서 엘리먼트를 만들 때는 해당 값에 key를 부여해줄 수 있다.

  const todoList = todos.map((todo) => <Item key={todo.id} {...todo}/>)
  return <>{todoList}</>

• map에서 배열을 호출할 때 spread 전개구문을 꼭 써줘야만 해당 값을 불러올 수 있다..!! 잊지마 !
  {...todo}

🚀 Key

• 여기서 key라는 개념이 등장하는데, 이 또한 react에 존재하는 요상꾸리한 개념이다.
• key 엘리먼트에 고유성을 부여하기 위해서 식별하기 위해서만!사용한다. 이 말을 풀어보면 보통 자바스크립트에서는 개별 id값을 부여해줘서 하나하나 다 불러왔어야했는데
• 리액트는 이 id 값을 props가 아닌 식별하기 위해서만 붙여주는 임시 값이라고 해석해볼 수 있다.
• 이 key는 props가 아니라서 값을 받아서 사용할 수가 없음
• 만약 key를 부여받고 싶다면 id로 key값을 부여해주고 id를 사용하는 형태가 되어야함
• 만약 별도의 key를 부여하지 않는다면 리액트는 자동으로 index를 부여함.
• 이 index값을 통해서 key를 부여하더라도 동작은 정상적으로 되나 콘솔에 가면 다음과 같은 warning이 뜰 것이다. 이 말은 리액트는 인덱스 키 값을 싫어한다는 것이다.
  

🚀 간단한 TodoList 만들기

  const todos = [
    {id:1, text:'Drink Water'},
    {id:2, text:'Buy Water'},
    {id:3, text:'Clean the Room'},
    {id:4, text:'Eat Dinner'},
  ]
  const Item = (props) => {
    return (
    <li>
      {props.text}
    </li>
    )
  }
  const todoList = todos.map((todo) => <Item key={todo.id} {...todo}/>)
  return <>{todoList}</>

• 다음과 같이 간단하게 TodoList를 만들었다.

🚀 key값의 위치

• 위의 코드에서 의문이 가는 것은 key의 위치가 어디에 있어야 하느냐 이다.
• 맨 위의 map을 썼을 때는 li에 key값을 넣어줬는데 이번에는 Item자체에 key를 넣어줬다.
• 이는 map함수의 내부의 결과 값으로 key를 넣어줘야한다는 것을 알 수 있다.

🚀 key의 중복 사용

• key는 다음과 같이 같은 형제들끼리는 공유가 가능하다
• 위의 코드에서 sidebar와 content는 같은 함수 내에서 존재하기 때문에 형제요소이고
• 해당 형제요소에서 각각 다른 map함수의 결과물을 도출하지만, key값은 공유한다

🚀 만약 key값을 props로 받고 싶다면?

  const Item = (props) => {
    return (
    <li>
      {props.text}
      {/* {props.key}는 성립되지 않음 */}
  	{props.id}
    </li>
    )
  }
    const todoList = todos.map((todo) => <Item key={todo.id} id={todo.id} {...todo}/>)

• 이렇게 id 인자값을 부모에서 따로 만들어줘서 호출해야만 props로 받을 수 있음.