순수함수(불변성, 사이드이펙트) / React state, props

 순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수를 의미하고, 불변성을 지키고 사이드 이펙트를 일으키지 않는 함수를 의미합니다. 불변성을 지킨다는 것은 값을 직접 변경하지 않고 늘 새로운 값을 리턴한다는 의미입니다. 불변성을 지킴으로써 얻을 수 있는 이점은 예기치 못한 사이드이펙트를 방지할 수 있다는 점입니다. 사이드 이펙트란 함수 외부의 상태를 변경하는 것으로, 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있습니다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있습니다.

 

 

---

props : 부모에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용하며, 직접적으로 수정할 수 없는 값이다.

 

props는 단방향으로 데이터를 전송한다는 특징이 있습니다. 그러므로 자식에서 부모로 혹은 동일한 레벨의 컴포넌트로 props를 전달하는 것은 불가능합니다.

또 props의 중요한 특징 중 하나는 읽기 전용 객체라는 것입니다. 컴포넌트 내에서 자체 props를 수정해서는 안되고 순수함수처럼 동작해야 합니다.

 

state : Component 내부에서 관리하는 데이터로, 변경이 가능한 값이다.

 

state는 컴포넌트 내부에서 관리하며, 상태에 따라 변하는 동적 데이터입니다. state는 props와 다르게 자동으로 생성되지 않아 명시적으로 state를 기술해야 합니다.

 

state 값을 변경할 때는 setState 함수를 사용하고 state가 변경되면 컴포넌트가 리렌더링이 되는 특징이 있습니다.

 

 

 

 

https://friedegg556.tistory.com/301

[TIL] 2023-0117 : 순수 함수 / 4주차 과제 진행과정 -1 / 캡처링, 버블링

 

https://seonhyungjo.github.io/Javascript-Book/basic/15-Pure-Functions-Side-Effects-State-Mutation.html

Pure Functions, Side Effects, State Mutation - Javascript Basic & Detail

 

https://minjung-jeon.github.io/React-props-state/

[React] React 의 Props, State | MINJUNG