헬리_storage 헬리_storage

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..

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: ..

앞에 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 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수..

점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해..

인스타 그램 클론코딩 중 내가 아주 애먹었던 😂 댓글구현 과정.. 드디어.. 이해가좀 되어 이렇게 정리하면서 업로드 해본다 👀👊 내가 한 방법은 1. 댓글을에 입력하면 comment 라는 state(초기값=[])에 받아와서 commentList라는 state에 추가하고, 2. 그 배열 형태롤 추가한 commentList에 map함수를 돌려서 배열안에 있는 데이터를 하나씩 가져온 후 3. 배열에서 가지고온 데이터를 라는 컴포넌트에 props로 넘겨주었고, 4. 댓글이 꾸려지도록 가져온 {props.data.commentItem} 로 구현해 보았다. 말로 풀어봤지만.. 뭐라는거지..? 라도 할 수 있으니 코드도 한번 넣어보았다...ㅠ //Main.js function MainFeed() { const [co..