한 걸음씩

#Challenge 1: accordion(v1) 아코디언을 동시에 여러 개를 열 수 있도록 코드 구성 state를 사용해서 아코디언이 열렸을 때, 닫혔을 때를 조정 #Challenge 2: accordion(v2) 한 번에 하나의 아코디언만 열 수 있도록 설정 부모 컴포넌트에서 state를 사용하는데 현재 열려있는 아코디언 값을 이용 자식 컴포넌트에서 state를 사용할 수 있도록 props로 넘겨줌 자식 컴포넌트에서 현재 열려있는 아코디언의 인덱스(curOpen)와, 지금 클릭하는 아코디언의 인덱스(num) 비교를 통해 하나의 아코디언만 열 수 있도록 함 #Challenge 3: tip calculator state, props, children, 컴포넌트 분할까지 종합적인 챌린지 하나의 컴포넌트에서..

◇ 프로젝트 이름 Pizza menu ◇ Tech HTML&CSS React ◇ 프로젝트 설명 리액트의 props을 사용하여 부모 컴포넌트가 자식 컴포넌트에게 데이터를 보내주어 프로젝트를 완성하였다. 부모 컴포넌트에서 데이터를 전달할 때 map 메서드를 사용하여 자식 컴포넌트에게 전달하였다. 프로젝트를 할 때 컴포넌트를 어떻게 나눌 것인가에 대해 먼저 생각을 해보았다. Header, Menu, Footer 이렇게 큰 컴포넌트를 세 개로 나눈 후 피자 이미지 사진은 public 폴더에 위치한다. Menu 컴포넌트 부분을 살펴보면 메뉴들이 나열된 부분이 있는데 이 부분을 좀 더 쪼개서 pizza 컴포넌트로 만들어 피자 데이터를 props을 이용하여 데이터를 전달하였다. Footer 컴포넌트도 마찬가지로 영업..

▶ Controlled Elements 상태정의 useState 폼 요소의 value 속성에 React상태 바인딩 onChange 이벤트 핸들러를 통해 사용자가 input 요소에 값을 입력하면 상태가 업데이트 된다. #challenge 1: Date counter(v1) useState, value, onChange #challenge 2: 카드 뒤집기 #challenge 3: Date counter(v2) useState, value, onChange setCount(Number(e.target.value))} value={count} /> 입력 가능한 상태(type="text")로 설정한 후, onChange 이벤트를 통해 현재 입력된 값을 가져와서 count 상태를 업데이트하고, value 속성에 ..

#challenge 1 #challenge 2 #challenge1, 2 props를 받아오는 방법이 다르지만 결과는 동일하다.

Q. 자바스크립트만으로 single page web을 만들기 어려울까? A. → ui와 데이터 동기화 필요함 → 엄청 어려움 A. 엄청난 양의 DOM 조작 요구(스파게티 코드), 데이터는 DOM에 저장되는데 이것은 버그를 발생시킴 Q. 리액트와 같은 프레임워크는 왜 존재할까? A. 프레임워크는 위의 문제를 해결하고, 코드의 구조를 올바른 방향으로 나아가게 한다. React Based on components : 구성요소 기반으로 다양한 구성요소(navbar, search...)가 쌓여 ui가 된다. Declarative : 명령적, jsx, 현재 상태에 근거해 어떤 게 보여야 하는지 알려준다, 추상화 State-driven : 데이터와 ui 동기화 Js library Extremely popoular 웹..