[React] state management

 

 

 

 

 

 

 

---

#Challenge 1: accordion(v1)

아코디언을 동시에 여러 개를 열 수 있도록 코드 구성 

state를 사용해서 아코디언이 열렸을 때, 닫혔을 때를 조정

 

---

 

#Challenge 2: accordion(v2)

 

한 번에 하나의 아코디언만 열 수 있도록 설정

부모 컴포넌트에서 state를 사용하는데 현재 열려있는 아코디언 값을 이용

자식 컴포넌트에서 state를 사용할 수 있도록 props로 넘겨줌

자식 컴포넌트에서 현재 열려있는 아코디언의 인덱스(curOpen)와,

지금 클릭하는 아코디언의 인덱스(num) 비교를 통해 

하나의 아코디언만 열 수 있도록 함

 

---

 

#Challenge 3: tip calculator

 

[왼]초기 화면 [오]가격과 팁 입력시 나타나는 화면

 

 

state, props, children, 컴포넌트 분할까지 종합적인 챌린지

 

부모 컴포넌트

 

자식 컴포넌트

 

하나의 컴포넌트에서 코드를 전부 작성한 후 분할을 했고, 

 분할하면서 자식 컴포넌트에 필요한 state, children를 적절하게 props로 보내는 과정이 조금 헷갈렸지만 할 만했다.