React study/React JS로 영화 웹 서비스 만들기33 [React] 4-0. Props 알아보기 📌 Props 지금까지 우리는 부모 컴포넌트인 App과 그의 자식 컴포넌트들인 MinutesToHours과 KmToMiles을 이용하여 코드를 작성하였고, 부모 컴포넌트 App은 자식 컴포넌트들을 render하였다. ⭐ Props props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다. props의 예시를 알아보기 위해 다음과 같이 코드를 초기화한다. props 예시) 1. SaveBtn 컴포넌트와 ComfirmBtn 컴포넌트를 만들어 주었고, 이것을 App 컴포넌트의 자식 컴포넌트로 넣어 화면에 render 시키는 코드를 작성한다. 컴포넌트: 어떤 JSX를 반환하는 함수 (or 클래스) // 함수형 컴포넌트 SaveBtn function SaveBtn() { re.. 2023. 5. 31. [React] 3-9. 단위 변환기 코드 발전시키기 📌 단위변환기 발전시키기 메뉴바를 만들어서 사용자가 원하는 단위변환기를 선택할 수 있도록 할 것이다. 앞에서 분/시간 변환기를 만들었는데, 마일/킬로미터 변환기를 하나 더 만들어 둘 중 하나를 사용자가 고를 수 있게 할 것이다. 1. App 컴포넌트에 작성했던 분/시간 변환 코드들은 또 다른 컴포넌트인 MinutesToHours에 붙여넣기 할 것이다. (h1 tag 부분(Super Converter)은 지워준다.) App 컴포넌트는 제목 부분만 남기고 초기화한다. function MinutesToHours() { const [amount, setAmount] = React.useState(0); ..... {inverted ? "Turn back" : "Invert"}button> ); } functio.. 2023. 5. 31. [React] 3-8. 단위 변환 앱 변수명 수정하기 📌 단위 변환 앱 살짝 수정하기 - state명 flipped을 inverted로, modifier명 setFlipped를 setInverted로 바꾸기 - Flip 버튼명 상황에 따라 바꾸기 inverted 상태라면 "Turn back"이 버튼명이 되고, inverted 상태가 아니라면 "Invert"가 버튼명이 된다. {inverted ? "Turn back" : "Invert"} 2023. 5. 31. [React] 3-7. Input과 State를 이용하여 단위 변환 앱 만들어보기 (3) 📌 단위 변환 앱 만들어 보기 전 시간에 이어서! 7. Flip 버튼 생성과 하나의 input에만 입력할 수 있도록 하기 7-1. Flip 버튼을 만들고, 그 버튼을 클릭하면 실행될 onFlip 함수를 연결해 준다. ..... Flip ..... 7-2. 지금까지는 minutes 라는 하나의 state만 가지고 있었지만 flip 조작 시 사용되는 새로운 state인 fliped를 만들어 준다. 초깃값은 false라고 설정한다. (분 -> 시간의 상태로, 뒤집어지지 않은 상태를 의미) ..... const [filpped, setFlipped] = React.useState(false); ..... 7-3. onFlip 함수의 내용을 작성하는데, flipped가 true 상태라면 false를 반환하고, f.. 2023. 5. 31. 이전 1 2 3 4 5 6 7 8 9 다음
