sohyeon kim

💡 리액트 공식문서 정리 : 상호작용성 더하기 1. 렌더링 : 컴포넌트를 화면에 표시하기 위한 준비렌더링 과정렌더링을 트리거(요청, 발동)컴포넌트를 호출해 화면에 표시할 내용을 파악, “렌더링”은 React에서 컴포넌트를 호출하는 것DOM 이 최신 센더링 출력과 일치하도록 수정컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.컴포넌트의 초기 렌더링인 경우: 루트 컴포넌트 호출 후, appendChild() DOM API 를 사용해 생성한 모든 DOM 노드를 화면에 표시컴포넌트의 state가 업데이트된 경우: state 업데이트가 일어나 렌더링을 트리거한 컴포넌트 호출 후, DOM이 최신 렌더링과 일치하도록 변경된 부분만 수정 2. 스냅샷으로서의 state : 리렌더링을 요청하면, 렌더링이 일어난 ..

💡 리액트 공식문서 정리 : UI 표현하기 1. export default : decault 키워드는 코드를 사용하는 다른 파일에서 이 함수가 주요 함수임을 알려준다.export default function Square() { return X;} SyntaxExport 구문Import 구문다른 이름으로 가져오기Defaultexport default function Button () {}import Button from './button.js';ONamedexport function Button () {}import { Button } from './button.js';X (그래서 Named import) 보편적으로, 한 파일에서 하나의 컴포넌트만 export 할 때 default export 방식을..

🥵 팀 프로젝트를 하다 알게 된 Link 문제점..!  btn 을 클릭했을 때나 엔터를 눌렀을 때 form 태그에 걸어둔 함수가 실행되고,Link(btn) 을 클릭하면 페이지가 이동되도록 했는데! Link 가 먼저 실행되어 form 에 걸어둔 함수가 실행되지 않았다.그래서 반대로도 감싸보고 했지만..❗️ Link 에 onClick 도 넣어봤는데 그럼 페이지 이동이 되지 않는다.  결국 Link 는 지우고,실행 할 함수에 마지막에 navigate 를 써서 페이지 이동을 하게 했다! ➕ 버튼 태그를 Link 처럼 사용하기 : 링크 컴포넌트이지만 모양만 버튼clink me

💡 리액트에서 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) => ( {/*가져온 데..

💡동적 라우팅 Dynamic Route path 에 유동적인 값을 넣어 특정 페이지로 이동하게끔 구현한 방법 이렇게 페이지들을 하나씩 지정해주는게 아니라 works/ 뒤 숫자들을 유동적으로 파라미터로 받아 오게 해보자! 1. 먼저 Router.js 에서 works/:id 를 적어준다. 2. Work.js 에서 useParams 를 연결 그럼 이동한 페이지의 id 를 얻을 수 있다! Router.js 에서 넣어준 id 가 객체에 들어가 있다. const { id } = useParams(); // 이런 식으로 가져올 수 있다. 3. 테스트 할 데이터 파일을 하나 만든다. Data.js export const data = [ { id: 1, todo: "리액트 공부", }, { id: 2, todo: "노드..

💡리액트 라우터 돔을 활용해 보자 1. 페이지 컴포넌트 작성 ➡️ 다중 페이지(우리는 원래 단일 페이지) 2. Router.js 파일 생성, router 를 구성하는 설정 코드 작성 ex) redux 할 때도 설정 파일을 만들어서 연결했다. 3. App.jsx import 하고(2번) 적용 : 연결(주입) 4. 페이지 이동 테스트 먼저 터미널에 npm add react-router-dom ~ 1. 페이지 컴포넌트 작성 2. Router.js 파일 생성 & router 구성하는 설정 코드 작성 - BrowserRoutr, Route, Routes 셋을 import 해온다 - 각 페이지들도 import - Route 에 페이지 연결 path="/" 이 부분은 url 뒤 들어가는 부분, 이동할 주소! impo..

[React] Redux : useSelector, useDispatch, 중앙 데이터 관리💡 리덕스를 활용해 보자~ props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다. 중앙 데이터 관리소 store 를 만들어서 데이터를 한번에 가져올 수 있도aotoyae.tistory.com  위 글에서 action 객체에 type 만 넘겨주고 있는데만약 input 을 만들어서 숫자를 받고, 버튼 클릭시그 숫자만큼 증가하거나 감소하게 만들고 싶다면? 💡 action 객체에 payload 를 추가한다.action 객체는 action type 을 payload 만큼 처리하는 것이다.payload 가 3이면, 3만큼을 plus 먼저 counter.js 로 가서 새 함..

💡 리덕스를 활용해 보자~props 를 넘겨주는 방식은 계속 지나쳐가는(props 를 넘겨주기만 하는) 컴포넌트가 생길 수 있다.중앙 데이터 관리소 store 를 만들어서 데이터를 한 번에 가져올 수 있도록 연결해 주자. 👀 그런데 Context API 말고 Redux 를 쓰는 이유는?1. 성능 최적화Context API 는 Provider 하위 모든 컴포넌트를 리렌더링하게 할 수 있다.그래서 불필요한 업데이트를 막기 위한 복잡한 최적화 과정이 필요하지만Redux 는 상태 변경 시 관련 컴포넌트만 선택적으로 업데이트할 수 있어 성능 관리에 용이하다. 2. 상태 로직의 중앙화와 일관성Redux 는 앱의 상태를 하나의 저장소 store 에 저장하기 때문에 상태 고직이 중앙에서 관리되어더 일관성 있고 예층..