🌞용어 정리

🪐props

properties의 줄임말이다. Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터를 전달하는 방법이다.
Props는 읽기 전용이며 자녀 컴포넌트에서는 값을 변화시킬 수 없다.
Props의 값을 자녀 컴포넌트에서 변화시키고자 한다면 부모 컴포넌트의 state을 변경해주어야 한다.

예시

<부모 컴포넌트에서>

<ChatMessages
	messages={messages}
	currentMember={member}
/>

<자식 컴포넌트에서>

export default function ChatMessages(props) {
  const messages = props.messages;
  const currentMember = props.currentMember;
  
  console.log(messages);
  console.log(currentMember);
  ...
}

하지만 위와 같이 props를 받게 되면은 가독성이 떨어질 수 있으므로 일반적으로 props는 구조 분해 할당을 통해서 받는다.

export default function ChatMessages({messages, currentMember}) {
  console.log(messages);
  console.log(currentMember);
 ...
}

쉽게 다시 정리해서 생각해보면 props는 함수나 메소드에서 인자를 받는 것처럼 자식 컴포넌트에서 부모 컴포넌트로부터 필요한 데이터를 받는 것과 같다.
하지만 parameter와의 차이점은 자식 컴포넌트에서 받은 props의 값을 변경할 수 없다는 점이다.

🪐state

부모 -> 자식으로 데이터를 보내는 것이 아니라 해당 컴포넌트 내에서 데이터를 전달하기 위해서 사용된다.
또한 state를 이용하는 단적인 이유는, 예를 들어 우리가 특정 변수의 값이 변경이 되었을 때 바로 화면에 그 값을 보여주고 싶으면 변수의 값이 변경될 때마다 리렌더링을 해주어야 한다. state를 이용하면 이 기능을 사용할 수 있다.

props와는 다르게 state는 변경할 수 있으며 이전에 살펴보았던 것처럼 class component에서는 setState함수를 사용하고 functional componenet에서는 useSate()의 반환값으로 받은 setter 함수를 사용해서 변경한다.

예시

const [value,setValue] = useState(0);

const addOne = () => setValue((item) => item + 1);

setter 함수는 기본적으로 react에서 value값은 인자에 넘겨주기 때문에 위와 같이 인자를 받아서 연산 후 value값을 변경할 수 있다.

⭐구조 분해 할당 (Distructuring)

구조 분해 할당(Destructuring Assignment)은 객체나 배열에서 필요한 값만 추출하여 변수에 할당하는 것을 말합니다. 이를 사용하면 코드의 가독성이 좋아지고, 코드 작성이 간결해지며, 불필요한 코드를 줄일 수 있습니다. -chatGPT

🪐객체에서

const person = { name: 'John', age: 30 };
const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

🪐배열에서

const arr = [1, 2, 3, 4, 5];
const [a, b, ...c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // [3, 4, 5]

전개 연산자(spread)를 이용해서 구조 분해 할당을 할 수도 있다. 위 에제에서 c변수에는 a, b에 1, 2가 할당된 이후에 남은 3, 4, 5가 배열로 할당된다.