본문 바로가기

컴포넌트2

아토믹 디자인(Atomic Design) 아토믹 디자인(Atomic Design) 아토믹 디자인을 설명하기에 앞서... 구글(Google)이 '머터리얼 디자인(Material Design)'이라 불리는 디자인 가이드라인을 공개한 이후, 디자인을 언어화하여 그 법칙성을 시스템으로 운용하는 접근법이 웹 개발에 널리 퍼지게 되었습니다. 물론 이전에도 인터페이스를 패턴으로 다루는 방법과 관련한 많은 해설서가 있었습니다. 심지어 1970년대에도 넓은 의미의 디자인 영역 관련 서적은 있었습니다. 따라서 웹 사이트 제작에서도 '컴포넌트' 단위가 중요해졌으며, 이 때문에 리액트의 특징 중 하나인 '컴포넌트 기반(Component-Based)'에도 반영되었습니다. 이러한 흐름 가운데 웹 디자이너 브래드 프로스트(Brad Frost)는 '아토믹 디자인'을 주장했.. 2020. 2. 21.
[리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) (출처: https://twitter.com/dan_abramov/status/981712092611989509) Updating 리액트 컴포넌트 생명주기의 첫번째 단계인 Mounting 단계를 거치면 Updating 단계로 들어갑니다. Updating은 Mounting과정을 거쳐 DOM을 형성한 컴포넌트에 state값이나 props값을 변경할 때 발생합니다. 지난글인 [컴포넌트 생명주기 - #1 Mounting]에서 예시로 적어둔 것 처럼, componentDidMount() 함수를 이용해 state값을 변경했습니다. 이미 DOM을 형성한 컴포넌트에 state값을 .. 2020. 2. 19.