분류 전체보기 (86) 썸네일형 리스트형 230202 TIL Memoization 컴포넌트가 리렌더링 되는 조건에는 state 변경, props 변경, 부모 컴포넌트 변경 3가지 조건이 있다. 그러나 리렌더링은 좋지 않다. 그러므로 리액트에서 불필요한 렌더링이 발생하지 않도록 최적화 하는게 중요! 1. memo(React.memo) : 컴포넌트를 캐싱 -> 부모 컴포넌트 변경 : 컴포넌트를 메모이제이션 export default React.memo(Box1) memo는 리액트 안에 있는 API로 import 해서 쓸 수 있다. import {memo} from "react" 그러면 export default memo(Box1) 로 쓸 수도 있다는 말! *무조건 쓰는게 아니라 자식 컴포넌트가 가벼운 변경이면 굳이 안써도 됨! *props 변경이 많이 일어나는 컴포넌.. 230201 TIL 노션에 필기 정리 해놓은 거 가지고 옴 노션이 정리하기 딱 좋다 리액트 컴포넌트 실행 순서 230131 TIL 정예부대 마지막 수업 - 리액트 총정리 DB가져와서 리액트 프로젝트 만들어보기 (투두리스트 같은거) 비동기 통신 이용 배열과 관련된 API 다룰 수 있어야한다. (map, filter, find 등등) jsonplaceholder 이용해서 db 뽑아볼 수 있어야한다. json 공부 esport와 esport default 차이 230130 TIL 리액트 심화 아웃소싱 프로젝트 KPT (무드망고) Keep : 협업 규칙과 git 커밋 컨벤션을 미리 세세하게 정해놓고 시작하니 훨씬 편했습니다. Problem : 타입스트립트 공부가 부족해서 적용시키지 못해 아쉽습니다. 최종 프로젝트 전에 공부를 많이하고 들어가야 할 거 같습니다. Try : 기본기를 더 탄탄하게 다져야겠고 코드를 직접 써보고 응용해보는 시간을 가져야 할 거 같습니다. Feel : 기본기 탄탄하게 다지기! 에러를 겁내하지말기! 모르는 건 무조건 물어보기! 230121 12주 차 - WIL 최종 프로젝트 전 마지막 심화 프로젝트 시작.. 소통도 실력도 좋은 팀원들을 만나 꽤 진행이 잘되고 있는 거 같다. 사실상 나는 지금 개인 공부가 절실한 상황이지만 팀 프로젝트이니 팀원들께 폐 끼치지 않고 정말 사소한 것일지라도 내가 맡은 건 열심히 해볼 것이다. 안되면 안된다고 어떤 게 안되는지 뭘 못하겠는지 팀원들에게 얘기를 하고 양해를 구할지언정 일단 해보자! 지금의 나는 초심으로 다시 돌아가 정신 상태부터 다시 세팅을 해야 할 거 같다. 내가 왜 코딩을 시작하게 되었는지 내가 지금 어떤 부분이 정확하게 안되는건지 어디까지 내가 진짜 할 수 있는지 정말 나는 열심히 해왔다고 자부할 수 있는지 내 자신에게 질문하고 답하는 시간을 가져야 할 거 같다. 230119 TIL 기존 JS로 한 React 프로젝트를 TS로 리팩토링 일단 터미널에서 Typescript 추가 yarn add typescript @types/node @types/react @types/react-dom tsc --init 위 명령어를 입력해 tsconfig.json 파일 생성 그리고 js, jsx 파일을 ts, tsx로 변경해준다. 230117 TIL 비동기 통신 import "App.css"; // async, await // then, catch, finally function App() { // fetch 키워드를 이용해서... fetch("http://localhost:4000/posts/1") .then((response) => { // 정상인 경우 console.log("response", response); }) .catch((error) => { // 오류인 경우 console.log("error", error); }) .finally(() => { // 무조건 나옴 console.log("무조건"); }); return Hello React!!; } export default App; // 비동기 : 제어권이 넘어간 상태 // then.. 230116 TIL 리덕스 툴킷 createSlice의 결과물이 action creators와 reducers createSlice 함수 안에는 객체가 인자로 들어간다. const todosSlice = createSlice({ name: "", initialState: "", reducers: "", }) reducers에는 객체로 구성되어 있고, todoList에서 쓰이는 reducer로 구성해 보면 addTodo, removeTodo, switchTodo가 있고 얘네들은 함수이다, 이 함수 하나하나가 action creator의 이름이 됨 외부에서 이것을 호출하면 type과 payload를 가진 action을 만들어줌. const todosSlice = createSlice({ name: "todos", initial.. 이전 1 2 3 4 5 6 ··· 11 다음
