소플의처음만나는리액트8 소플의 처음 만나는 리액트_실습final 소플의 처음 만나는 리액트_실습final 미니 블로그 기획하기 실습 기능 - 글 목록 보기 - 글 보기 기능(상세) - 댓글 보기 기능 - 글 작성 기능 - 댓글 작성 기능 컴포넌트가 많아서 프로젝트 폴더 구조 사진으로 대체! 글 작성하기 버튼과 댓글 작성하기 버튼은 실제로 기능을 하지 않는다. ** 마지막 빌드 작업에서 serve 에러가 나서 문제 확인 중이다. npx serve -s build 로 해결했다. 책의 모든 챕터가 다 끝이 났지만 앞으로 응용해서 여러가지를 만들어보며 빌드/배포까지 해봐야겠다. 2023. 8. 4. 소플의 처음 만난 리액트_실습13 소플의 처음 만난 리액트_실습13 styled-components - CSS 문법을 그대로 사용하면서 결과물을 스타일링된 컴포넌트 형태로 만들어주는 오픈소스 라이브러리 - 컴포넌트 개념을 사용하기 때문에 리액트와 궁합이 잘 맞음 - 태그드 템플릿 리터럴을 사용하여 구성 요소의 스타일을 지정 styled-components를 사용하여 스타일링해보기 실습 import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey.. 2023. 8. 3. 소플의 처음 만난 리액트_실습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. 이전 1 2 다음 반응형
