헬리_storage 헬리_storage

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

Styled component를 자습했다... 솔직히.. 왜쓰는지 모르겠다. 가장 최근 5년간 가장 인기있는 라이브러리라는데... 왜..? .. 다 이유가있겠지... 일단 내 손에 안익어서 그런가보다 하고... 그냥 냅다 정리부터 해본다. ㅠ 현업에서 일하는 친구도 스타일 컴포넌트를 쓴다고 한다.. 일단 className을 지정안해도 되고 손에익으면 너무 편리하다고하는데..? 공부나하자..ㅠ Styled Component css, Sass에서는 별도의 css, sass 파일을 생성하여 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있다. 적용 방법 : styled 객체에..

조건부 렌더링 사용하기를 간단하게 해 보았당 :) 구현해야 하는 것 const Review = () => { const [open, setOpen] = useState(false); const reviewOpen = () => { setOpen(!open); }; useState 를 이용해서 false 일때는 text가 안보이게, true때 보이게 설정하였다. 배송도 빠르고 정말 좋아요. {!open ? ( "" ) : ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에도 필요하면 또 여기서 시킬 것 같아요. )} 더보기 ▼ 삼항 연산자를 이용하였다. !open ? 일때 ture 이면 " " ( 빈 문자열)을 반환, false 이면 ( 주문한지 하루만에 배송이 도착해서 너무 좋았습니다. 다음에..

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

과제를 하기전에.. 아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다. 전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데.. 제발 이쯤되면 익숙해지자..나자신.. 😂 상수데이터란? UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다. 그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다. 왜 어떻게 상수데이터를 쓸까? : UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다. 이러한 상수데이터..

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

State? : 컴포넌트가 가질 수 있는 상태 useState? : 우리 컴포넌트의 상태를 간편하게 생성하고, 업데이트 시킬 수 있게 해 주는 도구를 제공해 준다. const [state, setState] = useState(초기값); // state 생성과 함께 가져야할 초기값을 useSate 함수의 인자로 넣어주면 //state와 setState라는 두가지 요소를 배열 형태로 return 해 준다. - state(변수) : 현재 상태 값 - setState(함수) : state를 변경시켜주고 싶을 때 더보기 예시) const [time, setTime] = useState(5); // 컴포넌트 안에는 time 이라는 state 가 생성되고, 초기값은 5시 를 갖게됨 // 이때, 시간을 변경하고 싶으..