bloomCode

결론적으로 소프트웨어 설계와 유지보수에 중점을 두려면 이론이 아닌 실무에 초점을 맞추는 것이 효과적이다. - 조영호 , 7~8p SOLID 원칙에 대해 배우면서 이론에 그치지 않고 코드에 적용해 보고 기록하려고 한다 내가 작성한 코드가 맞는지 틀린 지는 모르겠지만 항상 의심하며 계속해서 수정해 나갈 예정이다. MainContainer는 UI만 처리할 것 더보기 밑에 MainContainer는 메인페이지에서 사이드별 컴포넌트들을 보여주는 컴포넌트이다 하지만 nickname이라는 유저의 정보를 가져오는 데이터 로직 비즈니스 로직이 포함되어 있고 해당 정보를 하위컴포넌들에게 props로 전달해주고 있다 SRP 단일 책임 원칙에도 어긋나고 RightSdie와 NaviSide가 결국 MainContainer에 p..

저번에 useEffect는 어떻게 최신 상태를 읽을 수 있을까? 의 정리로 useEffect 내에서 동작하는 함수는 렌더링마다 고유한 함수이며 그 이펙트 렌더링상태의 고유한 state와 props를 보게 되는 것!이라고 하였다.(이펙트는 렌더링 결과의 일부는 아님!) https://zoon-bloom.tistory.com/130 이번에는 클리업에 대해 읽어보았는데 일단 클린업의 사용법은 다음과 같다. 클린업은 보통 컴포넌트가 원마운트되었을 때 이벤트를 제거하기 위해 사용하는 것으로 알고 있었다. 하지만! 가이드에서는 클린업이 리랜더링 되기 전에 실행되고 이전의 상태를 “보고”, 그다음 새 이펙트가 리랜더링 이후 실행되기 때문에 새로운 상태를 “본다고” 생각할 수 있지만. 이 멘탈 모델은 클래스의 라이프사..

https://zoon-bloom.tistory.com/129 리액트 useEffect 완벽가이드 props와 state 리액트의 함수형 컴포넌트를 사용 시에 꼭 사용하게 되는 useEffect에 대해서 글을 읽다 정리한 내용이 없어 천천히 다시 공부하며 정리할려고 한다. useEffect의 대해서는에 화면에 렌더링이 완료된 zoon-bloom.tistory.com 저번에 useEffect완벽가이드의 상태값은 변경될 때마다 각각의 랜더링에서 함수 안의 있는 고유한 값(상수)이며 컴포넌트는그 값을 볼 뿐이라고 하였다. 그럼 useEffect 훅 안에서는 어떻게 state의 최신 상태를 알 수 있을까? useEffect(() => { document.title = `You clicked ${count} ti..

리액트의 함수형 컴포넌트를 사용 시에 꼭 사용하게 되는 useEffect에 대해서 글을 읽다 정리한 내용이 없어 천천히 다시 공부하며 정리할려고 한다. useEffect의 대해서는에 화면에 렌더링이 완료된 후에 수행 전달된 함수를 수행하며 의존성 배열을 통해 특정 상황에 맞게 수행하도록 할 수 있다는 정도로 알고 있었다. https://ko.legacy.reactjs.org/docs/hooks-reference.html#useeffect Hooks API Reference – React A JavaScript library for building user interfaces ko.legacy.reactjs.org https://overreacted.io/ko/a-complete-guide-to-useef..

useEffect 내에서 비동기 적으로 api 호출을 하다 useEffect 내에서 바로 async와 await을 호출을 권장하지 않는다 하여 정리하게 되었다 다음과 같이 useEffet 내에서 async와 await을 사용하면 에러가 발생한다. Argument of type '() => Promise ' is not assignable to parameter of type 'EffectCallback'. Type 'Promise ' is not assignable to type 'void | Destructor'. 즉 React에서의 useEffect 사용권장 방식은 void를 반환하도록, return 값이 없도록? 구현해야 하는 것 같았다. 다른 블로그에서는 useEffect Hook은 아무것도 반환..

리액트에 제어 컴포넌트와 비제어 컴포넌트를 공부하면서 제어 컴포넌트에서는 useState의 set을 사용해서 특정 값을 변경하기 때문에 렌더링에 문제가 발생할 수 있지만 비제어 컴포넌트에서는 ref를 사용하여 불필요한 렌더링을 방직할 수 있다고 배웠다. ( react-hooks-input 라이브러리는 비제어 컴포넌트 방식을 사용하여 불필요한 렌더링을 방지) 그래서 리액트 공식문서에 있는 ref와 DOM 부분에 대해서 공부해 보았다. https://reactjs-kr.firebaseapp.com/docs/refs-and-the-dom.html Refs and the DOM – React A JavaScript library for building user interfaces legacy.reactjs.or..

react-hook-form을 왜 써야 할까에 대해 찾아보며 공부하다 들어보았던 제어 컴포넌트와 비제어 컴포넌트라는 키워드를 찾아 정리해 보기로 했다. 리액트 공식 링크: https://ko.legacy.reactjs.org/docs/forms.html#controlled-components 폼 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 예시로 다음과 같이 input에서 사용자가 텍스트를 입력 시 setName함수가 사용되는 것을 볼 수 있다. input을 렌더링 하는 React 컴포넌트는 사용자의 입력값을 제어하게 되므로 해당 컴포넌트는 제어 컴포넌트가 되는 것 같다! export const Create..

next 프로젝트 강의를 들으면서 react-hook-form을 사용하게 되어 react-hook-form에 대해 알아보다 여러 블로그를 다니다 react-hook-form 은 react 렌더링 관련 최적화와 깊은 관련이 있는 것 같았다. 그러다 눈에 들어온 것이 colocation이라는 단어였다. Coloctaion의 의미? colocation의 원리는 코드를 최대한 그것과 연관 있는 곳에 배치하는 것이다. 최대한 영향이 가는 부분을 최소화한다는 개념이라고 한다. 코드양이 점점 늘어나게 되면 의존성을 관리하는 것이 점점 어려워질 수 있으니, 주석이나 css 등 코드들을 관련 있는 것끼리 모아놓는 것을 뜻하는 것 같다. Colocation 원문 : https://kentcdodds.com/blog/col..

Next 강의를 들으면서 Next를 잘 다루려면 Next를 본문을 많이 읽어봐야겠다는 생각이 들어 이번에 Next 본문을 읽으면서 React도 좀 더 자세하게 파헤쳐봐야겠다는 결론으로 Next를 쓰는 이유에 대해서 알아보았다. Next 공식 문서 링크 : https://nextjs.org/ Next.js by Vercel - The React Framework Next.js Boilerplate A Next.js app and a Serverless Function API. Image Gallery Starter An image gallery built on Next.js and Cloudinary. Next.js Commerce An all-in-one starter kit for high-perfor..

React에서 State는 component 안에서 관리되는 것이다. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 하다. 자식 컴포넌트들 간의 데이터를 주고받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고받는다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다. 상태를 관리하는 상위 컴포넌트에서 계속 내려받아야 한다. => Props drilling 이슈 상태 관리 도구 종류 React Context Redux MobX Redux의 기본 개념 1. 스토어는 하나의 공간이다 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다. 2. 상태는 읽기 전용이다 리액트에서는 setState 메서드를 활용해야만 상태 변경이 가능하다. 리덕스에서도 ..