해당 내용은 https://www.udemy.com/course/best-react/ 강의를 들으며 정리하고 스스로 공부 한 내용을 기록 하였습니다.

Section 2. React Component

컴포넌트 기능이 실행되는 방법

const ExpenseItem = (props) => {
	let title = props.title;

    const clickHandler = () => {
		title = 'update';
        console.log('Clicked!!!!');
    };

    return (
        <Card className="expense-item">
            <ExpenseDate date={props.date}/>
            <div className="expense-item__description">
                <h2> {title} </h2>
                <div className="expense-item__price"> ${props.amount} </div>
            </div>
            <button onClick={clickHandler}> Change Title </button>
        </Card>
    );
};

위 상황에서는 title이 ‘update’ 로 전환이 되지 않는다. 왜 ?

컴포넌트는 일반적인 함수이고 그 함수에 대해 특별한 점은 JSX코드를 반환 한다는 것.

이 컴포넌트 함수를 호출한 적이 없는데, 다만 우리는 이렇게 썼다는 것을 확인 할 수 있다.

const Expenses = (props) => {
  const expenseItmes = props.items.map((item, key) => {
    return (
      <ExpenseItem
        key={key}
        title={item.title}
        amount={item.amount}
        date={item.date}
      />
    );
  });

  return <Card className="expenses">{expenseItmes}</Card>;
};

함수 불러오기와 거의 비슷하지만 JSX 코드 안에 있는 컴포넌트를 이용해서 리액트가 우리의 컴포넌트 함수를 인식하도록 만들었다.

리액트는 JSX코드를 평가할 때 마다 이런 컴포넌트 함수들을 호출 할 텐데, 호출할 컴포넌트 코드가 더이상 남아있지 않을 때 까지 JSX코드를 평가한다.

그 후 DOM 명령어로 번역해서 화면에 렌더링 한다.

리액트는 절대 반복하지 않는다.

리액트는 응용프로그램이 처음 렌더링 되었을 때 그 모든 과정을 실행하고 그 후는 끝이다.

하지만 최신은 화면에 보이는 것들을 업데이트 하고 싶을텐데, 리액트에게 어떤 것이 변경 되었고 특정 컴포넌트가 재평가 되어야 한다고 말하는 방법이 필요하다.

그래서 state 라는 특별한 개념을 도입한다.

---

State

useState

컴포넌트 함수 안에서 useState를 호출해야 한다. 가장 중요한 훅 중 하나.
함수 밖에서 호출 X, 중첩된 함수 안에서 또한 호출 X → 예외사항이 있긴 하지만 나중에 다시 알아보도록 하자.

useState() 의 특별한 종류의 변수를 반환하는데, 단지 변수 하나만 반환 하는 것이 아닌 변수에 새로운 값을 할당하기 위해 우리가 호출 할 수 있는 함수 또한 반환한다.

해당 함수는 배열을 반환하는데, 첫번째 값이 변수 자체인 배열을 반환하고 배열에서 두번째 요소는 업데이트 되는 함수이다.

const [title, setTitle] = useState(props.title);

첫 번째 요소는 관리되고 있는 값을 가리키며, props.title이 초기값으로 저장되어있다.

두번째 요소는 나중에 새로운 title를 할당 할 수 있는 함수이다.

useState훅 자세히 살펴보기

state는 리액트의 핵심 개념이라고 할 수있는데, 명확하게 하고 싶은 것들을 얘기해본다.

useState는 몇몇 State를 등록한다. State값이고 호출된 컴포넌트를 위한 값이다.

특정 컴포넌트의 인스턴스를 위해 state를 등록한다.

컴포넌트별 인스턴스를 기반으로 해서 독립적인 state를 가진다.
( -> State는 컴포넌트의 인스턴스별로 나뉘어져 있다.)

💡 간단히 정리하면, useState를 사용해서 상태를 등록하면 항상 두 개의 값을 얻게 되는데, 현재 상태 값과 업데이트 하는 함수이다.
그리고 state가 변할때 마다 업데이트 함수를 호출한다.
JSX코드에서 그것을 출력하기 위해 상태값을 사용하고 싶을 때 첫번째 요소를 사용한다.
상태가 변할 때마다 컴포넌트형 함수를 다시 실행하고 JSX코드를 다시 평가한다.

---

→ 상위 수준 (부모 컴포넌트) 로 통신 하는 방법
: 프로퍼티를 통해 함수를 받아들이고 이를 하위 수준(자식) 컴포넌트 내부로부터 호출하고 해당 함수를 부모 컴포넌트에 전달하는 방식으로 일부 작업을 트리거할 수 있다.

→ onClick과 같은 이벤트 리스너 프로퍼티에는 어떤 값을 전달해야 하는가?
: 이벤트가 발생했을 때 실행해야 하는 함수의 포인터
— 실행될 함수의 포인터를 OnClick등의 값으로 전달해야 한다. 그러면 이벤트가 발생했을 때 사용자를 대신하여 React 가 함수를 실행한다.

---

• 이 코드 는 어떤 작업을 수행하나요?
  someArray.map((element) => <p>{element}</p>)
  → 배열로 React에서 출력 가능한 JSX 요소로 채워진 새 배열로 변환한다.

• JSX 요소를 나열할 때 왜 특수한 “key” 프로퍼티를 추가해야 하나요?
  → React가 목룍 요소를 올바르게 식별 및 업데이트(필요시) 하는 데 필요하기 때문이다.

• React 컴포넌트에서 조건부 콘텐츠를 출력하는 데 관한 설명으로 옳은 것은 무엇인가요?
  → 컴포넌트에서 다른 결과를 출력 또는 반환하기 위해 if 검사의 정규 삼항 표현식으로 작업 할 수 있다.