TIL

분명 분명 나는 또 사용할 곳이 있을 것이기 때문에!!!!!!!!!!!!!!!! import React, { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { getAuth, onAuthStateChanged } from "firebase/auth"; export default function Navbar() { const [userMail, setUserMail] = useState(""); const [userProfileImg, setUserProfileImg] = useState(""); useEffect(() => { co..

풀옵으로 전달해주는 값에 따라 다른 리스트 컴포넌트를 보여주어야 했다. 그래서 작성한 코드 export default function ListSection({ text, onClick, category }) { let ComponentToRender = null; if (category === "면접후기") { ComponentToRender = Interview; } else if (category === "취업정보") { ComponentToRender = WorkInfo; } return ( {text} 더보기 {ComponentToRender && } ); } let을 이용해 ComponentToRender 라는 변수의 초기값을 null로 설정\ let ComponentToRender = null..

이번 과제에서 리덕스를 사용해서 상태 관리를 해야하는데 도대체 왜 사용해야 하는지 언제 어느 부분을 수정하면 좋을지 전혀 감이 오지 않았다. 그래서 알아본 것들을 기록해두고자 한다.😳 1. Redux 사용 시점 여러 컴포넌트에서 공유하는 상태가 많을 때 공유되는 상태가 많고, 이 상태들이 여러 컴포넌트에 걸쳐 있을 때 Redux는 중앙 집중식 상태 관리를 제공하여 코드를 더 깔끔하게 관리할 수 있도록 도와준다. 상태 업데이트 로직이 복잡할 때 상태 업데이트 로직이 여러 단계를 거치거나, 다양한 조건에 따라 상이할 경우 Redux의 미들웨어, 리듀서(reducer) 등을 사용하여 이러한 로직을 체계적으로 관리할 수 있다 상태의 일관성과 예측 가능성을 유지해야 할 때 Redux는 엄격한 규칙을 가지고 상태 ..

import React from "react"; import LetterItem from "./LetterItem"; import styled from "styled-components"; export default function LetterList({ letters, text, onDeleted, onEdit, personName, }) { return ( {text} {letters ?.filter( (letters) => !personName || letters.personName === personName ) .map((filteredLetter) => ( ))} ); } 구현하고 싶었던 것 letters를 filter하는데 personName이 있으면 personName과 일치하는 리스트를 넣..

1. useState 사용 시 주의할 점 export default function HwaSa() { const [letter, setLetter] = useState(""); const onAddLetter = (letter) => { setLetter([...LetterList, letter]) }; return ( ); } 다음과 같은 코드를 작성할 때, const onAddLetter = (letter) => { setLetter([...LetterList, letter]) }; 이렇게 작성하는 것은 문제가 발생될 수 있다. 📖[...LetterList, letter] 의 순서는 무엇을 먼저 나열할 것 인지를 말해준다 ❓ useState는 변경된 상태를 리렌더링하는 과정에서 어떤 부분이 바뀌었는지..

날짜를 구해서 Dday를 구하고 싶었다. 처음 작성한 코드는 아래와 같다. export default function Todo({ todo, onIsDone, onDelete }) { const handleIsDone = () => { const status = todo.status === "working" ? "isDone" : "working"; onIsDone({ ...todo, status: status }); }; const handleDelete = () => onDelete(todo); const planDate = new Date(todo.date); const nowDate = todo.today; const gapTime = planDate.getTime() - nowDate.getTi..

Redux ➡️전역상태 관리 라이브러리 State는 2개로 구분지을 수 있다. Local state = useState이용한 상태(컴포넌트 안에서 사용되는 State) Global state = 전체적인 상태 (redux) -- yarn 설치방법 -- yarn add redux react-redux package.json에서 확인해보기 -- Redux 폴더이름 만들기 -- 일반적으로 Redux를 사용할 폴더이름은 아래와 같이 만든다고 한다! ⬇️redux폴더 아래 ⬇️modules폴더 아래 ✅actions: 액선타입과 액션 생성자 함수를 정의 ✅ reducers: 상태의 일부를 관리하는 리듀서 함수 포함 ✅ selectores: 상태 트리에서 특정 부분을 선택하는 선택자 함수 ✅ middleware: 사..

아래 코드는 state값이 변경될 때마다 useEffect가 렌더링 된다. function App() { const [value, setValue] = useState(""); useEffect(() => console.log("hello")); return ( { setValue(e.target.value); }} /> ); } 이유는 useState는 값이 바뀔때마다 즉 업데이트될 때마다 계속 렌더링이 일어난다. 렌더링이 일어난다는 말은 모든 함수가 다시 재실행 된다는 소리이다. 때문에 useEffect도 state 값이 변경 될때마다 리렌더링 되는 것이다. 그런데 useEffect는 특정한 값이 변경될 때만 일어나면 된다. 위코드에서는 처음 페이지를 열었을 때만 실행이 되길..

JS로 CSS 컴포넌트를 꾸미는 방법으로 개발자 사이에서 꾸준히 있기 있는 css 패키지이다. styled component 기본적인 원리는 꾸미고자 하는 컴포넌트를 만들고 컴포넌트를 사용하는 것이다. 설치방법: Vs code에서 Extendsions에 vscord-styled-component 설치 ➡️ Vs code 터미널에서 yarn add styled-components 사용방법: import styled from 'styled-components'; styled import로 가져와서 사용 import "./App.css"; import styled from "styled-components"; const StBox = styled.div` width: 50px; height: 50px; bor..

우선 오늘은 무엇을 해야할지 잘 몰랐다. 자바스크립트 알고리즘 문제를 받고 풀어보기를 했는데 왜인지 기초적인 것도 제대로 이해하지 못하고 있는 것 같았다. 아니 조금더 자세히 얘기해 보자면 무엇을 해야하는지는 아는데 식을 작성할 줄을 모르겠더라 그저 한숨뿐.. 꽤나 충격적이었다. 시간이 있었다면 풀수 있었을까? 그럴지도 어려운 문제순으로 풀었고 어려운 문제는 곧잘 해냈으니까 근데 가장 원초적인 문제들이 오히려 어렵더라 단순한 기초만 식을 작성할 일이 없어서인지 손에 익지 않아서인지 뭔지 물론 어려운 문제들 중에서 풀지 못한 문제도 있지만 기초적일수록 더 모르겠었던 하하 우선 어떤함수를 사용해야하는지 구글링을 하면 알수 있지만 함수가 어떻게 작동되는지 이해하지 못하고 있어서 식을 제대로 완성하지 못하는 것..