Props5 [TypeScript] 공통컴포넌트 Nav 이용해보기 TS를 1도 모르는 상황에서 TS를쓰는 간단한 (?) 프로젝트가 시작되었다. 오늘 구현 한 컴포넌트는 공통컴포넌트로, Nav.tsx이다. 하나의 페이지에서 컴포넌트들만 바뀌는 식으로 개발을 할 것이었으며, 그 중에서도 Contents 내에 title부분을 Nav.tsx(공통 컴포넌트)로 정하고 구현했다. 코드는 이렇다. import React from 'react'; interface NavItem { title: string; subTitle?: string; } const SHAPE_NAV: NavItem = { title: 'What’s your nail shape?', subTitle: '(Choose based on the index finger.)', }; const CONCERN_NAV: N.. 2023. 10. 24. [React] Styled component (props) 1-2 (적용) Styled component 를 이용해서 각 다른 css 효과를 주기위해 버튼 3개를 만들어 보면서 각각 다르게 적용해 보았다. props를 이용해서 해보았다.... 어렵ㄷㅏ... 😂 바로 적용한 코드 적고, 그 밑에주석으로 설명을 좀 덧붙여 보았다. Practice.js (자식 컴포넌트) import styled, { css } from 'styled-components'; const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; border: 1px solid lightgray; font-size: 1rem; line-height: 1.5; color: ${p => p.color || 'gray'}; background: .. 2023. 2. 26. React) useEffect 앞에 Side Effect글과 이어서 useEffect에 대해정리해보겠다. https://hayley-0616.tistory.com/17 이제 useEffect 차례다.. 학습목표는 이것이었다.. - React 에서 Side Effect의 올바른 발생 시점 알기 - useEffect의 사용법 알기 - 조건부로 Side Effect 발생시키기 - Rendering & Effect Cycle 알기 - Clean Up Effect 알기 과연 나는 다 알았을 것인가.. 🙈😑🙈 React 에서 Side Effect의 올바른 발생 시점은 - 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수.. 2023. 2. 2. React) Props 점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해.. 2023. 1. 30. React) Instagram 간단하게 한 클론코딩 (댓글추가 구현) 인스타 그램 클론코딩 중 내가 아주 애먹었던 😂 댓글구현 과정.. 드디어.. 이해가좀 되어 이렇게 정리하면서 업로드 해본다 👀👊 내가 한 방법은 1. 댓글을에 입력하면 comment 라는 state(초기값=[])에 받아와서 commentList라는 state에 추가하고, 2. 그 배열 형태롤 추가한 commentList에 map함수를 돌려서 배열안에 있는 데이터를 하나씩 가져온 후 3. 배열에서 가지고온 데이터를 라는 컴포넌트에 props로 넘겨주었고, 4. 댓글이 꾸려지도록 가져온 {props.data.commentItem} 로 구현해 보았다. 말로 풀어봤지만.. 뭐라는거지..? 라도 할 수 있으니 코드도 한번 넣어보았다...ㅠ //Main.js function MainFeed() { const [co.. 2023. 1. 28. 이전 1 다음 728x90
