콘요맘떼 개발일지

Atomic Design Pattern 아토믹 디자인 패턴은 컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 레벨로 나누어 관리하는 방법론이다. 컴포넌트를 기반으로 하는 리액트, 뷰, 앵귤러 등 다양한 프레임워크 혹은 라이브러리에서 채택할 수 있으며 컴포넌트를 5개의 레벨에 나누어 잘게 쪼개고 결합함으로써 컴포넌트의 재사용성을 향상시킨다. Atom, Molecule, Page 레벨은 어느 정도 확고한 기준이 존재하지만 기본적으로 Atomic Design Pattern에서 컴포넌트 레벨을 나누는 것에 절대적인 기준은 존재하지 않는다. 따라서 프로젝트를 진행할 때 컴포넌트 레벨 구준 기준을 명확하게 확립하는 것이 필요할 ..

리액트에서 컴포넌트의 state를 제대로 갱신하기 위해서 주의해야 할 점을 간략히 정리해보겠다. 1. state 직접 수정하지 않기 컴포넌트의 state를 변경하고 싶으면 setState( ) 메소드를 활용해야 한다. 그냥 state에 값을 대입하는 경우 값의 갱신은 이루어질 수 있더라도 컴포넌트가 리렌더링되어야 한다는 사실을 알지 못하기 때문이다. (state에 직접 값을 대입하는 경우는 클래스 컴포넌트의 constructor( ) 메소드 내부 말고는 없다.) 2. state의 갱신은 원하는대로 이루어지지 않을 수 있다. 컴포넌트의 state 혹은 props는 비동기적으로 업데이트될 수 있다. 그렇기 때문에 state나 props에 의존하여 새로운 state를 지정해줄 때에는 주의가 필요하다. 이럴 때..