소플12 소플의 처음 만나는 리액트_실습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. 소플의 처음 만난 리액트_실습12 소플의 처음 만난 리액트_실습12 컨텍스트란? - 컴포넌트들 사이에서 데이터를 props를 통해 전달하는 것이 아닌 컴포넌트 트리를 통해 곧바로 데이터를 전달하는 방식 - 어떤 컴포넌트든지 컨텍스트에 있는 데이터에 쉽게 접근할 수 있음 - 여러 컴포넌트에서 계속해서 접근이 일어날 수 있는 데이터들이 있는 경우 - Provider의 모든 하위 컴포넌트가 얼마나 깊이 위치해 있는지 관계없이 컨텍스트이 데이터를 읽을 수 있음 고려할 점 - 재사용성이 떨어짐 - 다른 레벨의 많은 컴포넌트가 데이터를 필요로 하는 경우가 아니라면, 기존 방식대로 데이터를 전달하는 것이 더 적합 컨텍스트 API - React.createContext() 컨텍스트를 생성하기 위한 함수 컨텍스트 객체를 리턴 기본값으로 undefined.. 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. 이전 1 2 3 다음 반응형
