state3 행동 패턴 - 상태(State) - 참조: https://refactoring.guru/design-patterns/state - 참조: GoF의 디자인 패턴 - 상태(State) 패턴 상태 표현 객체(Object for state) 라고도 불리우며, 객체 내부의 상태가 변할 때 자신의 행동을 대체할 수 있도록 하는 패턴이다. 마치 객체가 자신의 클래스를 바꾸는것처럼 동작한다. - 문제점 상태 패턴은 대학교때 컴파일러 수업을 들었다면 자세한 내용이 기억나지는 않더라도 들어봤을법한 유한 상태 기계(Finite-State Machine)의 개념과 깊은 연관성이 있다. 메인 발상은 어떤 순간에 프로그램에서 존재하는 상태의 수가 유한하다는 것이다. 특정 상태 마다 프로그램은 모두 다르게 동작하며, 하나의 상태에서 다른 상태로 즉시 전환된다. .. 2021. 6. 19. [React 공식 Doc 가이드 #11] Lifting State Up - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Lifting State Up 때로는 같은 data에 대하여 여러개의 Component가 영향을 받는 경우가 있다. 이런 경우에 해당 Component 들의 최소 공통 조상 레벨로 state 를 올려서 공유하면 유용하다. 이번 Section 에서는 주어진 온도에서 물이 끓을 수 있느냐를 판단하는 온도계산기를 만들면서 State를 올린다는게 무슨말인지 이해해보자. 처음에 BoilingVerdict 라는 Component 로 시작을 할 것이다. 섭씨 온도를 prop 으로 받아서 물이 끓을 수 있는지 여부를 출력하는 기능을 가지고 있다. function BoilingV.. 2021. 2. 11. [React 공식 Doc 가이드 #6] State and Lifecycle - 이 글은 React 공식 홈페이지 Docs v16.8.3 (https://reactjs.org/docs) 에 기반하여 작성한 글입니다. - Clock 예제 다시 살펴보기 이전예제에서 1초 마다 시간을 보여주던 예제를 기억하는가? Rendering Element 에서 UI를 업데이트 하기 위해 ReactDOM.render()를 호출하였다. 이번 Section 에서는 실질적으로 재사용할 수 있고 은닉화(API 를 만듦에 있어서 필요한 정보외에는 client가 알아야 되는 부분을 최소화 하는)된 Clock component 를 만들어 볼것이다. 기능은 이전 예제와 똑같지만 Component 자체에서 timer를 설정하고, 갱신되게 만들어보자. 일단 여태까지 Component를 정의하고 사용해봤으니 Cloc.. 2021. 2. 11. 이전 1 다음
