sohyeon kim

💡 리액트 공식문서 정리 : 탈출구 - Effect 의존성 제거하기effect 를 작성하면 린터는 effect 의 의존성 배열에 effect 가 읽는 모든 반응형 값(props 나 state 등)을 포함했는지 확인한다.린터에 따라 반응형 값을 의존성 배열에 포함하면 effect 가 컴포넌트의 최신 props 및 state 와 동기화 상태를 유지할 수 잇게 된다.하지만 불필요한 의존성으로 인해 effect 가 너무 자주 실행되거나 무한 루프를 생성할 때도 있다.effect 에서 불필요한 의존성을 검토하고 제거하는 방법에 대해 알아보자. 1️⃣ 의존성은 항상 코드와 일치해야 한다.effect 를 작성할 땐 먼저 effect 가 수행하기를 원하는 작업을 시작하고 중지하는 방법을 지정한다.그 다음 effect..

💡 리액트 공식문서 정리 : 탈출구 - 반응형 Effect 의 생명주기, Effect 에서 이벤트 분리하기 1. 반응형 Effect 의 생명주기 : 동기화 시작 & 중지Effect 는 컴포넌트와 다른 생명주기를 가진다. 컴포넌트는 마운트/업데이트/마운트 해제의 생명주기를 가지지만,Effect 는 동기화를 시작하거나 중지하는 두 가지 작업만 할 수 있다. 다음 Effect 는 roomId prop 값에 의존한다. roomId 가 변경되면 Effect 가 다시 동기화(및 서버에 다시 연결)한다.function ChatRoom({ roomId }) { useEffect(() => { const connection = createConnection(serverUrl, roomId); // 동기화 시작 ..

💡 리액트 공식문서 정리 : 탈출구 - Effect 로 값 동기화하기, Effect 가 필요하지 않은 경우 1. Effect 로 값 동기화하기 : 컴포넌트를 외부 시스템과 동기화하는 방법이벤트 핸들러와 달리 Effect 를 사용하면 렌더링 후에 코드를 실행해 React 외부의 시스템과 컴포넌트를 동기화할 수 있다.e.g. 채팅 서버에 대한 연결 설정, 컴포넌트가 화면에 나타났을 때 분석 로그 전송 Effect 란 무엇이고 이벤트와 어떻게 다른가?우선 컴포넌트 내부의 2가지 로직 유형에 대해 알아보자.렌더링 코드를 주관하는 로직컴포넌트 최상단에 위치props 와 state 를 적절히 변형해 결과적으로 JSX 를 반환렌더링 코드 로직은 순수해야 함수학 공식과 같이 결과만 계산해야 하고, 그 외엔 아무것도 ..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 state 변경이 헷갈려 한참을 헤맨.. function Form({ memberId, letters, setLetters }) { const [nickName, setNickName] = useState(""); const [content, setContent] = useState(""); const [member, setMember] = useState(memberId); useEffect(() => { setMember(memberId); }, [memberId]); // memberId 가 바뀌면 set const addLetter = (e) => { e.preventDefault(); if (!nickN..

💡 리액트에서 api 데이터를 가져와보자! import { useEffect, useState } from "react"; function JsonApp() { const [data, setData] = useState([]); {/*데이터 들어갈 곳 초기 설정*/} useEffect(() => { fetch(`https://jsonplaceholder.typicode.com/posts`) .then((response) => response.json()) .then((json) => { setData([...json]); {/*가져온 json 복사해 데이터 갱신*/} return console.log(json); }); }, []); return ( {data.map((item) => ( {/*가져온 데..

💡 리액트 훅들에 알아보자 💡 useEffect  : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅- 컴포넌트가 화면에 보여졌을 때- 컴포넌트가 화면에서 사라졌을 때(return)import "./App.css";import { useEffect } from "react";function App() { useEffect(() => { console.log("hello"); {/*콘솔에 hello 출력*/} }); return useEffect;}export default App; 화면이 렌더링될 때 콘솔에 값이 출력된다. import "./App.css";import { useEffect, useState } from "react";function App() { const [value,..