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 방식을..

💡 json-server 를 이용해 간단한 서버를 만들어보자 먼저 npm install json-server or yarn add json-server ~ 설치가 끝나면 루트 경로에db.json 파일을 하나 만들고 데이터를 넣어준다. { "posts": [ { "id": "1", "title": "a title", "views": 100 }, { "id": "2", "title": "another title", "views": 200 } ], "comments": [ { "id": "1", "text": "a comment about post 1", "postId": "1" }, { "id": "2", "text": "another comment about post 1", "postId": "1" } ]..

💡 toolkit 을 이용해서 store 를 다른 방식으로 만들어보자! 먼저 npm install @reduxjs/toolkit ~ ✳️ 카운터 기능configStore.js// import { combineReducers, createStore } from "redux";import counter from "../modules/counter";import { configureStore } from "@reduxjs/toolkit";// const rootReducer = combineReducers({ counter });// const store = createStore(rootReducer);const store = configureStore({ reducer: { counter: configur..

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

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 props 로 내려줬던 데이터들을 useContext 로 바꾸다가 생긴 에러 모든 페이지에서 쓰고 있는 letter 들은 잘 내려줬는데.. 편지가 저장될 멤버 데이터를 내려주다가 에러가 생겼다. 검색해보니.. 오타나, 경로를 이상하게 가져왔을 거라고 나오길래 이름을 다 복붙해가며 수정해봤는데도 해결이 안됐다. 자꾸 저 ToHeader 에서 쓸 name 이 에러가 떠서 최상위에서 내려줬는데 왜 안되지??! 했으나 Member.jsx 에서 Provider 로 감싼 상태에서 Detial.jsx 에서도ToHeader 컴포넌트를 써서 생긴 문제였다. 🥵 그래서 데이터를 쓸 .. 최상위인 Layout 에 Provider 를..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 레이아웃 간의 props 공유를 해보자 Header 와 Footer 는 고정해 두고 path 변경에 따라 children 에 pages 들로 화면이 변경된다. 🚨 문제는 ! 1. member 페이지에서 편지를 작성하고 편지를 클릭 해 detail 로 갈 때 그 letter 의 정보를 불러오지 못하고 있다. (연결이 안되어있다.) 2. home, member, detial 세 페이지를 서로 이동하면 letter 데이터가 초기화된다. 현재 편지 데이터를 모아둔 letters 를 member 페이지 안에 만들어둬서 다른 페이지인 detail 에서 어떻게 가져와야 하는지를 모르겠어서 튜터님께 찾아갔다. (전날부터 막막해..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 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..

💡 블로그나 SNS 같은 피드형 웹페이지 프로젝트 🧑🏻‍💻 역할 분담 우선 필수 구현인 페이지, 기능들만 역할을 나눠두었다. react 로 팀 프로젝트가 처음이라 어떻게 나눠야 할지 애매했는데 우선 컴포넌트 별로 분담했다! 🎀 와이어 프레임 와이어 프레임도.. 컴포넌트를 어떻게 쪼개야할지 고민됐는데 일단 크게 나누고 하위는 담당하는 사람이 잘 나눠두고 전달하기로 했다! 🥹

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