React 용어

📌 엘리먼트(Element)

 

React 애플리케이션을 구성하는 블록

 

엘리먼트는 화면에 보이는 것들을 기술하며, React 엘리먼트는 변경되지 않는다.

 

const element = <h1>Hello, world</h1>;

 

일반적으로 엘리먼트는 직접 사용되지 않고 컴포넌트로부터 반환된다.

 

📌 컴포넌트(Component)

 

페이지에 렌더링 할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각

 

가장 간단한 React 컴포넌트는 React 엘리먼트를 반환하는 일반 Javascript 함수

 

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

 

컴포넌트는 기능 별로 나눌 수 있으며 다른 컴포넌트 안에서 사용할 수 있다. 컴포넌트는 다른 컴포넌트, 배열, 문자열, 그리고 숫자를 반환할 수 있다. 화면을 구성하는 데
자주 사용되는 UI(Button, Panel, Avatar), 혹은 복잡한 UI(App, FeedStory, Comment) 컴포넌트는 재사용 가능한 컴포넌트가 될 수 있다.

 

컴포넌트의 이름은 항상 대문자로 시작

 

📌 Props

 

컴포넌트의 입력 값

 

부모 컴포넌트로부터 자식 컴포넌트로 데이터를 보내는 방법

 

함수의 첫 번째이자 유일한 매개변수

 

💡 읽기 전용, 수정 x

사용자의 입력 또는 네트워크의 응답에 반응하여 어떤 값을 수정해야 한다면 state를 사용해야 함

 

Btn 컴포넌트에 banana 라는 속성 전달

 

Btn 컴포넌트에서 props로 받음

 

Btn 컴포넌트에서 props 사용

 

결과 Element

 

📌 State

 

변경 가능한 현재 데이터를 저장하는 곳

 

컴포넌트와 관련된 일부 데이터가 시간에 따라 변경될 경우 state가 필요하다.

 

🙏 필요성

 

✔ 자동 리렌더링

 

 

위 코드를 보면 onClick을 통해 counter 변수가 변경될 때마다 리렌더링 하고 있다.

 

이처럼 데이터가 변경될 때마다 리렌더링해야 하는 번거로움을 해결해 준다.

 

✔ 바뀐 부분만 리렌더링

 

VanillaJS의 경우 컴포넌트(태그) 단위로 업데이트하기 때문에 바뀐 부분을 포함하는 태그 전체가 리렌더링 된다.

 

<span> 태그 전체 리렌더링

 

반면, React는 이전에 렌더링 된 컴포넌트와 다음에 렌더링 될 컴포넌트를 비교하여 UI에서 바뀐 부분만 리렌더링 한다. 이것을 재조정(Reconciliation)이라고 한다.

 

{couter} 만 리렌더링

 

데이터가 변경되는 각 특정한 부분에 대해, 해당 상태(state)를 소유하는 컴포넌트는 하나만 존재해야 한다.

 

서로 다른 컴포넌트를 동기화하려고 하지 말고, 대신 공통 상태를 두 컴포넌트의 공통 조상으로 끌어올리고 해당 데이터를 두 컴포넌트에 props로 전달하자

 

💡 Props vs State

- props는 부모 컴포넌트로부터 전달받지만, state는 컴포넌트에서 관리된다.
- 컴포넌트는 props를 변경할 수 없지만, state는 변경할 수 있다.

 

🔍 선언

 

배열로 선언하며, 0번 인덱스에 사용할 변수(변경할 값), 1번 인덱스에 setter를 선언한다.

 

const [counter, setCounter] = React.useState(0); //초기값 0

 

🔍 Inputs and State

 

React는 input 태그의 값을 통제하지 못한다. 이때 state를 사용하여 현재 input 값을 활용할 수 있다. 또한, input 태그에 들어온 값이 변경되었을 때
어떤 작업을 하고 싶다면 onChange에 state를 연결하여 처리할 수 있다.

 

이로써 어디서든 input 태그의 값을 수정할 수 있게 된다.

 

 

📌 생명주기 메서드(Lifecycle method)

 

컴포넌트의 각각의 단계에서 실행되는 커스텀 기능

 

컴포넌트가 만들어지고 DOM에 삽입될 때(mounting), 컴포넌트가 업데이트될 때 및 컴포넌트가 DOM에서 마운트 해제될 때(unmounting) 혹은 제거될 때
사용할 수 있는 기능을 제공

 

📌 제어 컴포넌트 vs 비제어 컴포넌트

 

React는 두 가지 방식으로 form 입력을 처리한다.

 

🔍 제어 컴포넌트(controlled component)

 

React에 의해 입력값이 제어되는 엘리먼트

 

사용자가 제어 컴포넌트에 데이터를 입력하면 변경 이벤트 핸들러가 호출되고 코드가 (업데이트된 값으로 다시 렌더링에 의해) 입력의 유효 여부를 결정한다. 다시 렌더링 하지 않으면 form 엘리먼트는 변경되지 않은 상태로 유지된다.

 

🔍 비제어 컴포넌트(uncontrolled component)

 

form 엘리먼트가 React 외부에서 동작하는 것처럼 작동한다. 사용자가 form 필드(input box, dropdown 등)에 데이터를 입력하면 업데이트된 정보가 React에서
별도 처리할 필요 없이 엘리먼트에 반영된다. 그러나 이는 특정 필드가 특정 값을 갖도록 강제할 수 없다는 의미이기도 하다.

 

대부분은 controlled component를 사용해야 한다.

 

📌 Key

 

엘리먼트의 배열을 만들 때 포함해야 하는 특별한 문자열

 

Key는 React가 어떤 항목을 변경, 추가 혹은 삭제할지 식별하는 것을 돕는다. 엘리먼트들을 안정적으로 식별할 수 있도록 배열 내의 엘리먼트에 key를 제공해야 한다.

 

Key는 같은 배열에 포함된 요소들 사이에서만 고윳값을 가지면 된다. 전체 애플리케이션 또는 단일 컴포넌트 전체에서 고윳값을 가질 필요는 없다.

 

안정적인 값을 가져야 하므로 Math.random() 같은 값보다 컴포넌트가 다루는 객체의 id를 사용하는 것이 좋다.

 

References:

 

https://ko.legacy.reactjs.org/docs/glossary.html

React 기술 용어 모음 – React

 

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders