[데브코스 Day 47] 2022.12.20

📖오늘 배운  것

navigator.clipboard.writeText()

텍스트를 클립보드에 복사할 수 있는 메서드이다.

매개변수로 복사할 문자열을 받는다.

navigator.clipboard.writeText("복사할 텍스트")

 

Context

:단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

 

context는 props drilling을 해결하기 위한 하나의 방법이다.

props drilling이란 컴포넌트 트리의 한 부분에서 다른 부분으로 데이터를 전달하기 위해 오직 props를 하위 컴포넌트로 전달하는 용도로 컴포넌트들이 사용되는 과정을 말한다. 

이때 Context를 사용하면 중간 컴포넌트들을 거치지 않고 바로 원하는 컴포넌트에서 데이터를 전달받을 수 있다.

 

React.creasteContext

: Context 객체를 만들고 트리 상위에서 짝이 맞고 가장 가까이에 위치한 Provider로부터 현재 값을 읽는다.

const TaskContext = createContext();

 

Context.Provider

: Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트들에게 전달한다.

return (
    <TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
      {children}
    </TaskContext.Provider>
  );

-> 컴포넌트 내부에 있는 tasks, addTask, updatetask, removeTask를 하위 컴포넌트에게 전달할 수 있다.

-> Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 된다. 

 

export const useTasks = () => useContext(TaskContext);

useContext를 통해 Context에 저장되어 있는 전역 데이터에 접근할 수 있다.

 

//TaskProvider.js
const TaskContext = createContext();

export const useTasks = () => useContext(TaskContext);

const TaskProvider = ({ children }) => {
...
  return (
    <TaskContext.Provider value={{ tasks, addTask, updateTask, removeTask }}>
      {children}
    </TaskContext.Provider>
  );
}

    <TaskProvider>
      <Container>
        <Header>Todo</Header>
        <NewTaskForm />
        <TaskList css={{ marginTop: 16 }} />
      </Container>
    </TaskProvider>

TaskProvider 하위 요소들이 children이 되어 전역 데이터에 접근할 수 있게 된다. 

 

전역 데이터를 사용할 땐

const { updateTask, removeTask } = useTasks();

이런 식으로 각 데이터에서 원하는 데이터에 접근할 수 있다.

 

Drag&Drop 이벤트

• onDragEnter: 드래그한 요소가 유효한 드롭 영역에 들어갈 때 발생
• onDragLeave: 드래그한 요소가 유효한 드롭 영역을 벗어나는 경우 발생
• onDragOver: 드래그가 완료됐을 때 발생(기본동작과 이벤트 전파를 막도록)
• onDrop: drop이 실행됐을 때 발생

 

Children props를 jsx를 반환하는 함수로 만들기

export default function Upload(){
...
    return (
    ...
    {typeof children === "function" ? children(file, dragging) : children}
    ...
    )
}

이런 식으로 사용하면 children이 함수로 들어오는 경우 해당 함수를 실행시킨 결과를 보여주도록 하고 아니면 그냥 보여주도록 할 수 있다. 만약 children으로 정보를 넘겨줘야한다면 이런 방법을 통해 쉽게 넘겨줄 수 있다.

 

 

💭배운 점

강의 내용이 어렵다! 계속 이리저리 뜯어보면서 봐봐야 할 것 같다.  내가 찍먹해봤던 리액트가 아니야...(?)

storybook도 처음이라 계속 쓰면서 익숙해져야 할 것 같고 따로 공부해보는 시간이 필요할 것 같다.

이게 아직 심화단계가 아니라니...심화에서는 대체 어떤 일이 일어날지...😇