Develop/React3 React component의 순수성이란 Component를 순수하게 유지하자 순수 함수(Pure function)는 계산만 수행합니다. 그러므로 component를 순수 함수로만 엄격하게 작성하면, 코드 베이스가 커짐에 따라 함께 올 수 있는 각종 버그들과 예측 불가능한 동작을 피할 수 있습니다. 순수 함수 효과를 얻기 위해서 따라야할 몇 가지 규칙이 있으며, 지금부터 알아보겠습니다. 순수성 함수형 프로그래밍에서는 순수 함수가 다음의 특성을 따릅니다. 호출되기 전에 존재했던 객체나 변수는 변경하지 않습니다. 즉 자기 자신에 대해서만 생각합니다. Input이 같으면 output도 같습니다. Input으로 같은 값이 주어지면, 순수 함수는 항상 같은 결과를 반환해야 합니다. 이미 우리는 수학에서 순수 함수와 비슷한 것을 본 적이 있습니다. y=2.. 2023. 8. 18. Render와 Commit 여러분이 만든 컴포넌트들이 화면에 보이기 전에 컴포넌트들은 React에 의해 렌더링이 되어야 합니다. 이러한 프로세스를 익힌다면, 우리는 코드가 어떻게 실행되는지와 그 이면에 대해 이해할 수 있을 것입니다. 뜬금없지만 지금부터는 컴포넌트(Component)가 부엌에서 여러 재료들을 조립해서 맛있는 요리를 만드는 요리사라고 생각해봅시다. 이 시나리오에서는 React는 고객의 요청을 접수하고 전달해주는 종업원이 됩니다. UI를 요청하고 제공하는 이 프로세스에는 다음과 같은 세 가지 단계가 존재합니다. Triggering a render(손님의 주문을 부엌으로 전달) Render the component(부엌에서 주문을 준비) Committing to the DOM(테이블에 주문한 음식을 놓기) 첫 번째 단계.. 2023. 7. 20. React 상에서 컨디션 렌더링을 위해 사용하는 "&&" 에 대한건 안녕하세요. 오늘은 React에서 조건에 따라 렌더링을 다르게하고 싶을 때 사용하는 "&&" 연산자를 알아보고 올바른 조건 렌더링(conditional rendering) 작성법을 알아보겠습니다. 우리는 React 애플리케이션을 보면서 props와 state에 따라 component를 조건부 렌더링하는 방법에 대해서 알고 있습니다. 보통 "&&" 연산자를 많이 사용하실 겁니다. 하지만 아시는 분은 아시겠지만 "&&" 연산자를 사용하면 원치않는 UI 버그를 발견할 수 있습니다. 이제 아래에서 좀 더 자세히 살펴보겠습니다. 전통적으로 "&&" 연산자를 사용하는 방법에 대해 먼저 알아볼까용? function ExampleComponent({ condition }) { return ( Example {condi.. 2022. 12. 19. 이전 1 다음 반응형
