S1: useState와 Props로 자식onClick<=>부모상태 제어하기

Sidebar 컴포넌트 내부에 버튼1과 2가 있으며 해당 버튼을 누르면 Sidebar는 그대로 출력된 상태에서 다른 컴포넌트 2개가 연결된 버튼으로 나타나게 하려고한다.

 

1. 자식 컴포넌트인 Sidebar에서 버튼마다 oncClick 이벤트를 달아 버튼울 누를시 props의 한 객체 요소로써 test에 값을 담아 props로 보낸다.

test에 값을 담아 props의 한 객체부분으로 인자를 내보낸다.

2. 부모 컴포넌트인 App에서 Sidebar컴포넌트를 나타내고 태그안에서 test를 받아와 부모의 상태값과 상태값을 변화시킬 함수를 담은 useState에의 상태값을 변화시키는 함수에 연결시킨다.

test로 부터 가져온 값의 변화감지를 setShow가 맡게되고 변화한 값은 show에 저장시킨다. 삼함연산자에 의해 show값에 따라 2개의 컴포넌트가 스위칭된다. 상태 초기값은 버튼의 "features"를 주어 맨처음 클릭이 없을때 초기값으로 출력된다.

* 자식은 자신의 버튼을 클릭하여 부모의 상태(state)를 바꿀수 있게 됐다.

* 자식은 자기상태가 필요없다! 자식이 뭘 클릭했는지에 따라 부모가 뭘 보여줄지 결정하니 부모가 상태 를 가지고있어야한다. useState