리액트 기본 개념 - 3

 

실습을 하던 중 이제 props로 부모에서 자식으로 데이터를 전달 해줘야한다. 그래서 이 데이터 전달에 대한 코드만 적겠다.

이는 todo인데, 이제 Header, Todo, Footer 이렇게 있는데, 전달은 Todo를 통해 자식에게 전달해준다.

    <div id='todo'>
      <Header />
      <Todo itemList={itemList} addItem={addItem} toggleDone={toggleDone} deleteItem={deleteItem} />
      <Footer />

 

이것은 Todo.jsx

  <h2>쇼핑 목록</h2>
     <TodoInput addItem={props.addItem} />
      <TodoList itemList={props.itemList} toggleDone={props.toggleDone} deleteItem={props.deleteItem} />

여기를 보면 TodoInput과 TodoList가 있다.

그리고 TodoList안에 TodoItem에 있기에 둘다 전달해줘야 한다. 아래와 같이 전달 받으면 되는데, 여기서 문제가 있는게, 만약 함수를 전달한다. 그러면 함수에 return값이 없다면 undefined로 되어, 어떠한 작동도 하지 않을 것이다. 그래서 전달할 때는 저렇게 이벤트를 통해 전달하여 저 이벤트가 발생이 되었을 때, 실행이 되도록 해야한다.

function TodoItem({ item, toggleDone, deleteItem }) {
  return (
    <li>
      <span>{item._id}</span>
      {/* 이벤트가 발생하면 그때 호출, 함수만 호출하게되면 return 값이 없기때문에 undefined로 나온다. 그래서 함수 객체를 전달해줘야 한다. */}
      {/* toggleDone(item._id)로 전달하면 이는 return값이 없다. 이벤트 리스너는 함수를 등록하는 것이기 때문에, 함수 호출하는 코드를 작성하면 안된다. */}
      <span onClick={() => toggleDone(item._id)}>{item.done ? <s>{item.title}</s> : item.title}</span>
      <button type='button' onClick={() => deleteItem(item._id)}>
        삭제
      </button>
    </li>
  );
}

export default TodoItem;

 

 

이미지

이미지크기 1반 바이트 (12,288 바이트), 9.7 킬로바이트(9,728 바이트) 이하

• Base64 인코딩을 통해 텍스트로 변환하여 HTML, CSS 등에서 바로 사용할 수 있다.(Base64 인코딩 포맷)
• 이렇게 하면 이미지 파일을 따로 불러올 필요 없이 HTML 문서 안에 내장할 수 있어, 작은 아이콘이나 간단한 이미지를 쉽게 삽입이 가능하다.
• console.log로 확인하면 아래와 같이 나온다.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAIAAADWpi2lAAA..." />

 

이미지크기 1반 바이트 (12,288 바이트), 9.7 킬로바이트(9,728 바이트) 이상

• 별도의 파일로 처리를 한다.
• console.log로 확인하면 아래와 같다. 경로로 나온다.

/static/media/siri.e6a70a555204b3a1f6f0.png

 

만약 외부에서 이미지를 가져올 경우 URL로도 이미지를 가져올 수 있다.

<img src=”url” />