sozerodev/myfirstreact

Created with CodeSandbox

myFirstReact

Created with CodeSandbox

my first React Project with 생활코딩 and React tutorials by Velopert.

React 필기

state와 props의 개념

• 사용자의 입장에서 제품을 조작하는 장치를 버튼, 화면 터치 등.. UI(User Interface)라 한다.
• 이런게 컴포넌트를 만드는 리액트의 관점에서는 props라 함. (제품을 조작하는 장치라는 것)
• 제품을 만드는 사람들은 제품의 내부 구현을 위해 다양한 상태들을 사용하고, 다양한 내부적 조작장치(메커니즘)을 가지는데 이런 것들이 state라 한다.
• 그래서 props는 사용자가 컴포넌트를 사용하는 입장에서 중요하고, state는 props의 값에 따라서 내부의 구현에 필요한 데이터들을 의미함.
• component를 만들면 component가 생긴다. 생긴대로만 쓰면 아쉬우니 컴포넌트의 기본적 동작을 내맘대로 바꾸고싶을 때 props를 제공하는 것을 통해 사용자는 해당 컴포넌트를 조작할 수 있게 된다. 즉, props는 컴포넌트의 사용자에게 중요한 정보이다. 물론 구현자도 중요함.
• 사용자에겐 알 필요도 없고 알아서도 안되는 컴포넌트 내부적으로 사용되는 것들을 State라 함.
• 그래서 리액트와 같은 시스템이 컴포넌트를 만들고 그 컴포넌트가 좋은 부품이 되기 위해서는 컴포넌트를 사용하는 외부의 props라는 것과 그 props에 따라서 그 컴포넌트를 실제로 구현하는 내부의 state라는 정보가 철저하게 분리되어 있어야 한다. 철저하게 격리 시켜서 양쪽의 편의성을 각자 도모하는 것이 지향되어야 한다.

이벤트 state props 그리고 render 함수

• props, state, event 이 세개가 상호작용하며 애플리케이션의 역동성을 만든다.
• React에서는 props의 값이나 state의 값이 바뀔 경우 해당되는 컴포넌트의 render()함수가 다시 호출된다. 그게 다시 호출됨에 따라 그 render()함수 하위의 컴포넌트들도 각자의 render()함수들이 싹 다시 호출이 된다. 그러면서 화면이 다시 호출되는 것.
• render()가 하는 일은 어떠한 html을 그릴 것인지를 결정하는 함수이기 때문.
• 즉.. props나 state의 값이 바뀌면 화면은 다시 그려진다.