React.js / 01 / 기초 -6.5

* 작동에 필요한 기능

1) 문닫기 버튼 클릭 => 문열기 버튼
1-5) 문닫기 버튼 클릭 => Open -> Closed 텍스트 변경
2) 문닫기 버튼 클릭시 => 밑에 input창 생성
2-5) input창에 작성한 글을, 밑에 그대로 출력

* 필요한 기능을 위한 도구 
- React / useState / useRef

- 각 코드에 대응하는 것들끼리 색깔로 묶어서 표시했음 


🟥 빨간박스 : 버튼 눌렀을때 useState hook으로 변경 값 갱신


🟩 녹색박스 : 빨간박스를 실행 할 버튼클릭 이벤트 구성


🟨 노란박스 : 인풋 요소 값 접근(useRef) + 인풋 값 갱신 (useState)


**) ✅ 삼항 연산자로 값 출력 

🛠️ D D D D e v l o p

-  구조와 틀을 동일하나, 

👉 동일 변경이 위에 겹치니 ( 객체로 하나로 묶음 ) 
👉 객체 . 키  ==> 값 호출 ㅇㅋ?