항해99/실전 WIL | TIL25 [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문을 사용한다거나, 삼항 연산자나 && 연산자 등 내가 원하는 답을 찾기가 너무 어려웠다. 예.. 2023. 4. 22. [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으로 적용했을 경우,.. 2023. 4. 21. [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'는 다르다... 설치.. 2023. 4. 20. [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의 필.. 2023. 4. 19. [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.. 2023. 4. 18. [TIL-006] 리액트 개념, 리액트에서 SCSS 사용해 보기 Today목표 : 4/15일 리액트 개념, 리액트에서 SCSS 사용해 보기 알게된 점, 리액트 개념 공부✅ 1. State를 쓰는 이유 상태값에 따라 UI를 변경하기 위해서 => 리렌더링을 다시 하기 위해서 state는 구조분해 할당하여 사용한다. const [state, setState] = useState(0) 2. 리액트의 생명 주기 mount - update - unmount 1) 불변성 => 메모리의 값을 변경할 수 없는 것 - 원시타입 : 불변함 => 메모리값을 변경하지 않고, 새로 할당하기 때문 - 객체타입 : 가변함 => 주소값 안의 데이터를 변경 => obj1 영역의 메모리 값을 변경하기 때문 => 따라서 복사 시에 주소값을 새로 할당하여 새 obj영역의 주소를 부여해 메모리값이 변경되지.. 2023. 4. 16. 이전 1 2 3 4 5 다음
