전체 글 썸네일형 리스트형 [TIL-011] Styled-component 동적으로 활용하기, 기술 면접 스터디 발표 Today목표 : 4/21일 Styled-component 동적으로 활용하기, 기술 면접 스터디 발표 알게된 점, Styled-component 파일 구조✅ src/ components/ Button/ index.js Button.styles.js Card/ index.js Card.styles.js 위 파일 구조를 참고하여 모듈화하여 styled-component를 사용하는 연습을 해야 할 것 같다. Styled-component 동적으로 활용하기✅ Styled-component에서 동적으로 style을 변경하고 싶어 구글링을 하면서 여러가지 방법을 찾아보았다. 하지만 보통 inline 방식이거나, switch문을 사용한다거나, 삼항 연산자나 && 연산자 등 내가 원하는 답을 찾기가 너무 어려웠다. 예.. 더보기 [TIL-010] 리액트 라우터(Router), 기술 매니저님 질문/응답 정리 Today목표 : 4/20일 리액트 라우터(Router), 기술 매니저님 질문/응답 정리 알게된 점, 리액트 라우터(Router)✅ 리액트 라우터를 공부하면서 정리한 내용을 포스팅하였다. [React] React-router-dom이란 무엇인가? Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 junvelee.tistory.com 기술 매니저님께 질문 / 응답✅ 1. SCSS 등에서 컴포넌트의 타입에 따라 스타일을 다르게 적용시키는 방법 먼저 todo-list에서 사용했던 방식으로 className에 inline으로 적용했을 경우,.. 더보기 [React] React-router-dom이란 무엇인가? Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 이동하는 것을 의미한다. 1. 일반적인 Routing 서버에 URL로 새로운 페이지 전체(html, css, js, img 등)를 요청해서 응답 받은 새 페이지를 업데이트 한다. 2. React Router = CSR(Client Side Routing) 서버에 URL로 새로운 페이지를 요청하는 것이 아니라 페이지는 유지하되, Application에서 업데이트가 필요한 부분만, 경로에 해당하는 컴포넌트만 부분적으로 업데이트하고, 부분적으로 네트워크 통신(fetch 등)하여 JSON 형.. 더보기 [TIL-009] 리덕스(Redux)의 이해 및 활용 Today목표 : 4/19일 리덕스(Redux)의 이해 및 활용, todo-list에 Redux 적용 시키기 알게된 점, 리덕스(Redux)의 이해 및 활용✅ 다음 포스팅에 공부한 내용을 정리해 보았다. 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 junvelee.tistory.com styled-component 사용해보기 ✅ styled-component를 사용해 보면서 느낀점 먼저 주의 : styled-component와 styled-component's'는 다르다... 설치.. 더보기 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 : 부모 -> 자식 컴포넌트로 props를 계속해서 내려주면, 불필요한 컴포넌트에도 전달되어야 하고, 부모 컴포넌트가 리렌더링 시 자식 컴포넌트도 리렌더링 된다. 어디서 props을 내려주는지, 디버깅이 힘들다 등의 단점이 있다. 2) useContext 등 context API의 위험성 : 전역 State의 provider가 한개라도 변경되면, props을 받는 모든 하위 컴포넌트 전체가 리렌더링 된다. => context API vs 리덕스 공부 3) 따라서 Global st.. 더보기 [TIL-008] 리액트 Hooks, 최적화 과정, VDOM 이해 Today목표 : 4/18일 리액트 Hooks, 최적화 과정, VDOM 이해 알게된 점, 리액트 Hooks(useContext, useCallback, useMemo, )✅ 1. useContext => react context API로 전역 데이터를 관리한다. 부모 -> 자식으로 데이터를 전달할 때. props으로 내려주면서, 드릴링 현상이 일어난다. - props drilling의 문제점 1. 너무 깊어지면(만약 단계가 100..이렇게) 어디에서 props를 내려주고 있는지 파악이 어려움 2. 어떤 컴포넌트에서 에러 발생 시 디버깅이 힘들어짐 useContexnt => 데이터를 전역 데이터로 관리함으로서 하위 컴포넌트에서도 접근 가능하게 하여 props 드릴링을 하지 않아도 된다. context의 필.. 더보기 [TIL-007] 리액트 Hooks, Styled-component, 리액트 todo-list, 튜터님 질문 응답 정리 Today목표 : 4/17일 리액트 Hooks, Styled-component, 리액트 todo-list, 튜터님 질문 응답 정리 알게된 점, 리액트 Hooks(useState, useEffect, useRef)✅ 1. useState : state가 업데이트 될 때 마다 리렌더링 리액트에서 state를 업데이트 하는 방식 : 배치 업데이트 vs 함수 업데이트 차이 1) 배치 업데이트 { setCount(count + 5); setCount(count + 1); setCount(count + 1); // 명령을 모아 가장 마지막만 반영되어 한번만 업데이트 }} > => 명령의 변경 사항을 모아서 '한번만' 업데이트 한다. 2) 함수 업데이트 { setCount((currCount) => currCount.. 더보기 [TIL-006] 리액트 개념, 리액트에서 SCSS 사용해 보기 Today목표 : 4/15일 리액트 개념, 리액트에서 SCSS 사용해 보기 알게된 점, 리액트 개념 공부✅ 1. State를 쓰는 이유 상태값에 따라 UI를 변경하기 위해서 => 리렌더링을 다시 하기 위해서 state는 구조분해 할당하여 사용한다. const [state, setState] = useState(0) 2. 리액트의 생명 주기 mount - update - unmount 1) 불변성 => 메모리의 값을 변경할 수 없는 것 - 원시타입 : 불변함 => 메모리값을 변경하지 않고, 새로 할당하기 때문 - 객체타입 : 가변함 => 주소값 안의 데이터를 변경 => obj1 영역의 메모리 값을 변경하기 때문 => 따라서 복사 시에 주소값을 새로 할당하여 새 obj영역의 주소를 부여해 메모리값이 변경되지.. 더보기 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
