리액트15 소플의 처음 만난 리액트_실습11 소플의 처음 만난 리액트_실습11 합성이란? - 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 - 다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음 Containment - 하위 컴포넌트를 포함하는 형태의 합성 방법 - children속성 사용, 여러 개의 children 집합이 필요한 경우 별도로 prop를 각각 정의해서 사용 Specialization - 범용적인 개념을 구별되게 구체화하는 것 C+S - props.children을 통해 하위 컴포넌트를 포함 + 별도의 props를 선언하여 구체화시키기 리액트에서는 상속이라는 방법을 사용하는 것보다 합성을 사용하는 것이 더 좋음 Card 컴포넌트 만들기 실습 //Card.jsx //C+S 합성 사용한 컴포넌트 //title과 backgr.. 2023. 8. 2. 소플의 처음 만난 리액트_실습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. 이전 1 2 3 4 다음 반응형
