Core Principles of React and How to Use Hooks: From Component Structure to State Management and Optimization

Frontend development has undergone a paradigm shift since the advent of React. React abstracts DOM manipulation to compose UI in a declarative way, and integrates markup and logic into a single component through JSX. When state changes occur, it secures performance by minimizing actual DOM changes through the asynchronous processing of setState and the Reconciliation algorithm.

Logic Reuse and Optimization through Hooks

Hook, introduced to reduce the complexity of Class components, allows state and lifecycle to be managed in Functional components. useState does not automatically merge the previous state with the new state, so caution is needed, and useEffect handles side effects that run after rendering is complete. To solve the Wrapper Hell problem of the HOC or Render Props approach, custom Hooks can be used to share logic.

Performance Improvement Strategies

To prevent unnecessary rendering, PureComponent is used in Class components and React.memo in Functional components to perform shallow comparison of Props. In addition, useMemo can be used to memoize computation results based on a dependency array, reducing computational cost. The Kurly frontend team is carrying out various tasks based on this React tech stack.