본문 바로가기

전체 글

(73)
styled-components styled.div div를 스타일링 styled.input input을 스타일링 예제 polished의 스타일 관련 유틸 함수 사용 yarn add polished flex와 inline-flex는 차이는 단순합니다. display: flex;로 지정된 Flex Container는 Block 요소와 같은 성향(수직 쌓임)을 가지며, display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가집니다. 여기서 말하는 수직과 수평 쌓임은 Items가 아니라 Container라는 것에 주의합시다. 두 값의 차이는 내부에 Items에는 영향을 주지 않습니다.
useEffect useEffect Hook의 종류 Hook을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 언마운트 됐을 때 (사라질 때) 업데이트 될 때 (특정 props가 바뀔 때) 파라미터 첫 번째 : 함수 두 번째 : 의존값이 들어있는 배열 (deps) 배열의 값이 변경될 때도 useEffect( ) 호출되게 함
Redux Redux 사용 이유 Root컴포넌트 밑에 H컴포넌트의 onDoSomething함수 : something값을 변화시키는 함수 Root컴포넌트 밑에 F컴포넌트에 something값 있음 onDoSomething : Root -> B -> H로 전달 H에서 이벤트 발생 somethig : Root -> A -> E -> F로 전달 따라서 비효율적 리덕스가 효율적 리덕스 구조 개념 정리 액션 상태에 어떤 변화가 필요할 때 사용되는 객체 type필드는 필수적으로 가져야함 액션 생성 함수 액션을 만드는 함수 리듀서 변화를 일으키는 함수 두 가지의 파라미터 받음 =>새로운 상태를 만들어서 반환 state 현재 상태 action 전달받은 액션 스토어 모든 상태 관리 state값을 보유 리듀서에 의해서만 state값 ..