소플12 소플의 처음 만난 리액트_실습10 소플의 처음 만난 리액트_실습10 공유 state - 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는것 state 끌어올리기 - 하위 컴포넌트의 state를 공통된 부모 컴포넌트로 끌어올려서 공유하는 방식 - 재사용 가능 섭씨온도와 화씨온도 표기하기 실습 //Calculator.jsx import React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; //100도 이상인지 미만인지 체크 function BoilingVerdict(props) { if (props.celsius >= 100) { return 물이 끓습니다. } return 물이 끓지 않습니다. } //섭씨 온도 변환 fun.. 2023. 8. 2. 소플의 처음 만난 리액트_실습9 소플의 처음 만난 리액트_실습9 폼이란? - 사용자로부터 입력을 받기 위해 사용하는 양식 제어 컴포넌트 - 사용자가 입력한 값에 접근하고 제어할 수 있게 해주는 컴포넌트 - 값이 리액트의 통제를 받는 입력 폼 엘리먼트 ... - 사용자가 파일을 선택할 수 있게 해주는 HTML태그 - 서버로 파일을 업로드하거나 자바스크립트의 File API를 사용해서 파일을 다룰 때 사용 - 읽기 전용이기 때문에 리액트에서는 비제어 컴포넌트가 됨 여러 개의 입력 다루기 - 컴포넌트에 여러 개의 state를 선언하여 각각 입력에 대해 사용하면 됨 input null value - value prop은 넣되 자유롭게 입력할 수 있게 만들고 싶을 경우, 값이 undefined 또는 null을 넣으면 됨 사용자 정보 입력받기 실.. 2023. 8. 1. 소플의 처음 만난 리액트_실습8 소플의 처음 만난 리액트_실습8 리스트 - 같은 아이템을 순서대로 모아놓은 것 키 - 각 객체나 아이템을 구분할 수 있는 고유값 - id 사용 (주로 많이 씀) - index 사용 (순서가 바뀔 수 있는 경우에는 권장x, 키를 명시적으로 넣지 않았을 때 사용) 여러 개의 컴포넌트 렌더링 - map() 함수 사용 : 각 변수에 어떤 처리를 한 뒤 결과를 배열로 만들어서 리턴함 - map() 함수 안에 있는 엘리먼트는 꼭 키가 필요함 출석부 출력하기 실습 //AttendanceBook.jsx import React from "react"; //배열 생성 const students = [ { id: 1, name: "Chumji", }, { id: 2, name: "Steve", }, { id: 3, name.. 2023. 8. 1. 소플의 처음 만난 리액트_실습7 소플의 처음 만난 리액트_실습7 조건부 렌더링이란? - 조건에 따라 렌더링의 결과가 달라지도록 하는 것 엘리먼트 변수 - 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법 인라인 조건 - 조건문을 코드 안에 집어넣는 것 - 인라인 if → 논리 연산자 &&를 사용 → 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링 - 인라인 if-Else → 삼항 연산자 ?를 사용 → 앞에 나오는 조건문이 true면 첫 번째 항목을 리턴, false면 두 번째 항목을 리턴 → 조건에 따라 각기 다른 엘리먼트를 렌더링하고 싶을 때 사용 컴포넌트 렌더링 막기 - 리액트에서는 null을 리턴하면 렌더링되지 않음 - 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨 로그인 여부를 나타내는.. 2023. 7. 31. 이전 1 2 3 다음 반응형
