데일리숙제 - (8) React의 state / props, 순수함수, 불변성과 사이드이펙트

데일리숙제 - 7 React의 state / props, 순수함수, 불변성과 사이드이펙트

순수함수

• 순수함수 : 입력값으로부터 예측 가능한 결과값을 반환하는 함수,
  함수 내부에서 외부의 상태를 변경하지 않으며
  동일한 입력값에 대하여 항상 동일한 결과를 반환한다.

따라서 순수함수는 불변성을 유지하며 사이드이펙트가 없는 함수이다.
순수함수는 외부상태를 변경하는 것이 불가능한것이 키 포인트
사이드이펙트가 있는 함수는 외부 상태를 변경할 수 있으므로 불변성을 유지 한는다.

불변성(Immutability) : 값이나 객체의 상태가 변경 불가능한 것을 말한다.
사이드이펙트 : 함수나 메소드가 외부에 영향을 미치는 것, ex) 함수 내부에서 전역변수를 수정하는 경우

• ex)

순수함수는 Side Effect(부작용)이 없는 함수이며,

순수 함수는 입력값으로부터 예측 가능한 결과값을 반환하는 함수이며, 함수 내부에서 외부의 상태를 변경하지 않는 함수입니다. 즉, 동일한 입력값에 대해 항상 동일한 결과를 반환하며, 함수 외부의 상태를 변경하지 않는 함수를 의미합니다.

순수 함수는 부작용(side effect)이 없는 함수이며, 이는 함수가 프로그램 내부나 외부에 영향을 주지 않으므로 함수를 테스트하고 이해하기가 쉽습니다. 함수형 프로그래밍에서는 순수 함수를 사용하여 프로그램의 안정성과 예측 가능성을 높이며, 코드의 가독성과 유지보수성을 향상시킵니다.

---

React의 State와 Props

• React : 컴포넌트 기반의 Javascript 라이브러리

• Component : UI를 생성하는데 사용되는 재사용 가능한 코드의 단위

• UI : User Interface 의 약자로, 사용자와 컴퓨터 또는 기기사이의 상호작용을 가능하게 하는 모든 요소
  ex) 웹사이트나 모바일 앱에서 버튼, 메뉴, 입력창, 등 사용자가 직접 조작 할 수 있는 모든 요소들이 UI의 일부이다.

• State : 컴포넌트 내부에서 관리되는 상태값, 컴포넌트 내부에서 변경이 가능하며 State가 변경이 될 때 React는 자동으로 다시 컴포넌트를 랜더링한다.
  ex) 사용자가 버튼을 클릭하면 State 값이 변경이 되고 이로 인해 컴포넌트가 다시 렌더링이 됨

• Props : 컴포넌트끼리 데이터 전달을 위한 속성값으로, 부모 컴포넌트에서 자식 컴포넌트로 Props를 전달 할 수 있음
  Props 컴포넌트 내부에서 변경은 불가능하며, 부모 컴포넌트에서 자식 컴포넌트로 전달된 Props는 자식 컴포넌트에서 변경이 되지 않아야 한다.
  ex)
  부모 컴포넌트에서 자식 컴포넌트로 Props를 전달하면, 자식 컴포넌트는 전달된 Props를 화면에 렌더링 할 수 있다.
  부모 컴포넌트에서 전달된 Props가 변경이 되면 자식컴포넌트는 다시 렌더링이 된다.