useEffect useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다. componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 useEffect는 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. React는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다. side effects => 데이터 가져오기 , 구독 설정하기, 수동으로 react 컴포넌트의 DOM을 수정하는 것 등등 class componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { ..
그래서 각기 다른 길이를 가지고 있는 컴포넌트에게 어떻게 스타일을 입혀주지? ThemeProvider 사용법 말고 컴포넌트 분리자체가 궁금하면 1번 글 보러가세요 일단 어떻게든 분리는 했는데... 그래서 어떻게 style을 넣어줄지 고민이 되었어요. 그러던 중 ThemeProvider을 알게 되었음. ThemeProvider 장점 1. 매번 노가다 안해도 괜찮음 2. 스타일 선언 순서에 대한 일관성 확보 가능 3. 컴포넌트 자체를 재사용하기 편함 이정도가 내가 생각한 ThemeProvider의 장점이에요. 더 있을 수도 있는데 아직 그거까지는 모르겠답니다. 나중에 알게되고 + 안귀찮으면 업데이트 할게용> void; id?: string; value?: string; minLength?: number; m..
우리는 리액트 입문 10일차이지만 이 미션을 완성해야만 해..! 처음 레벨2의 payments 미션을 만났을 때 솔직히 막막했다. 시간은 없고 미션은 끝내야하고,, 나는 리액트의 가장 큰 장점 중 하나를 컴포넌트의 재사용이라고 생각했다. 하지만 컴포넌트를 어디까지 나눌 것인가에 대한 이야기를 시작하자 답답해졌다. 가장 작은 단위로 쪼개서 필요에 따라 재사용 하고 싶은데 그럴 능력도 시간도 우리에겐 없었다. 그래서 일단 컴포넌트를 크게크게 자르기로 결정! 카드번호, 만료일, 소유자 이름, 보안 코드, 카드 비밀번호 이렇게 한 묶음이다. payments에서 가장 재사용이 활발한 친구는 input 요소이다. 내 로직에서 끝까지 가장 날 괴롭힌 컴포넌트인 카드 번호 인풋의 코드를 예시로 들겠다. 이런 애들이 각..
