본문 바로가기

전체 글107

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) Side Effect React의 꼬-ㅊ 이라는 useEffect를 배웠다.. 일단...이론은 알겠다.. 알겠는데... 흠.. 일단 내가 배운대로 정리를 해보겠다. 먼저 side Effect다. 일단 학습목표는.. React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다. useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다. useEffect hook을 활용해 원하는 타이밍에 Side Effect를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다. Side Effect 란? : 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과를 말한다. : 함수의 주된 목적은 Input을 받아서 output을 산출하는 것 이므로 (inp.. 2023. 1. 31.
React) Props 점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해.. 2023. 1. 30.
Mock Data 데이터에 대해서 배우고있다... 다음주가 지나면 프로젝트가 들어갈텐데... 이정도 실력으로 프로젝트를 할 수 있을까.. 😂 넘나 걱정이고!?? 그치만..그전에 모르는것을 그냥 넘어갈 순 없으니.. 오늘은 데이터 (상수 데이터 와 mock 데이터)중에서도 Mock data에 대해 공부해보았고, 강의를 들으며 정리를 해 보았다. Mock Data란? : 백엔드 API에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 백엔드 API처럼 만든 데이터 이다. 이때, 백엔드와 프론트엔드 각각 사용하는 컴퓨터 언어가 다를텐데 그래서 약속을 한 것이 통신할때는 json 형태로 주고받기로 하여, 코드를 보낼때 json 형태로 변환하는 코드도 같이 심어서 보내야한다. 왜 사용하는걸까? - 백엔드 API가 미완성인 .. 2023. 1. 29.
React) 상수데이터 과제를 하기전에.. 아직 배우지 않은 상수데이터에 대해 나오길래 한번 정리를 해보았다. 전에 댓글 구현할때 애먹었던..Javascript의 map을 여기서도 또 쓰게되었는데.. 제발 이쯤되면 익숙해지자..나자신.. 😂 상수데이터란? UI 구성에는 필요하지만 동적으로 변하지 않아서 백엔드로부터 API 등을 통해서 데이터를 가져올 필요가 없는 변하지 않는 정적 데이터를 말한다. 그래서 상수데이터로 UI를 만들때는 백엔드에 요청하지 않고 컴포넌트에서 만들 수 있다. 왜 어떻게 상수데이터를 쓸까? : UI를 보다 효율적으로 확장성 있게 구성할 수 있으며, 특히 반복되는 UI구조는 상수데이터와 map 메서드를 이용하여 간결하게 표현이 가능하고, 그래서 유지보수가 용이하기 때문에 이용한다고 한다. 이러한 상수데이터.. 2023. 1. 29.
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.

티스토리툴바