소주제 : 컴포넌트와 graphql의 실체 & global state

1. props, data, prev의 실체 파악하기

1. 아래의 함수형 컴포넌트 불러오는 방식을 함수 자체를 불러오는 방식으로 변경해 보세요.

// container 부분
export default function Container() {
  return (
    <>
      <Presenter child="철수" />
    </>
  );
}

// presenter 부분
export default function Presenter(props) {
  return <div>{props.child}</div>;
}

1. 아래의 함수형 컴포넌트 불러오는 방식을 함수 자체를 불러오는 방식으로 변경해 보세요.

// container 부분
export default function Container() {
  return (
    <>
      <Presenter child="철수" age={13} />
    </>
  );
}

// presenter 부분
export default function Presenter(props) {
  return <div>{props.child}는 {props.age}살 입니다.</div>;
}

1. 아래의 코드가 정상적으로 작동하지 않습니다. 제대로 작동하도록 만들어 보세요.

["철수", "영희", "훈이", "맹구"].map((index) => {
	console.log(`영희는 ${index}번째 칸에 들어있습니다.`)
})

1. 아래의 코드가 정상적으로 작동하지 않습니다. 제대로 작동하도록 만들어 보세요. 단, qwer은 변경하지 않습니다.

const [state, setState] = useState(0)

setState(qwer => prev + 1)

2. Recoil 적용하기

1. pages/21/recoil/new 페이지, pages/21/recoil/edit 페이지, /src/commponents/unit/example/write 컴포넌트를 각각 만들어 줍니다.
2. new 페이지와 edit 페이지에서 write 컴포넌트를 불러와서 연결해 줍니다.
3. edit 페이지에서 write 컴포넌트를 불러올 때 props로 isEdit={true}를 넘겨줍니다.
4. write 컴포넌트에서는 props로 받은 isEdit으로 3항 연산자를 사용하여 "등록하기" 또는 "수정하기"를 화면에 보여줍니다. <h1 />태그를 사용하세요.
5. new 페이지에 접속하면 "등록하기", edit 페이지에 접속하면 "수정하기"가 나오는지 확인해 주세요.