State와 Props

클래스형 컴포넌트 → 함수형 컴포넌트로 바꾸기

1. export default class AppClass extends Component → export default function App()

2. class형 컴포넌트에서는 render함수 안에 return/ 함수형 컴포넌트에서는 render() 없이 바로 return

   • render함수는 컴포넌트를 렌더링 하는 메소드

3. state → useState

   const [value, setValue] = useState("");
   // 첫번째 인수: 변수 이름. 두번째 인수: state를 정하는 함수

4. this.state.todoData → todoData, this.state.value = value

5. this.setState() → setTodoData() or setValue()

   // prev : 이전 값 사용
   setTodoData(prev => [...prev, newTodo])

6. 함수 및 변수 정의 방법 변경

   • const, let 사용

7. 정의된 함수 및 메소드 사용 방법 변경

   • this필요 x

State와 Props

state

• 해당 컴포넌트 내부에서 데이터 전달할 때 사용
  • ex. 검색 창에 글 입력시 글 변화
• state는 변경 가능 (mutable)
• state가 변하면 re-render됨

state = {
	message: '',
	attachFile: underfined,
	openMenu: false,
}

props

• 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터를 전달
• 읽기 전용(immutable)으로 자녀 컴포넌트 입장에서는 변하지 않음(변하게 하고자 한다면 부모 컴포넌트에서 state를 변경 시켜줘야 함)

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

구조 분해 할당(Destructuring)

(es6) 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 Javascript 표현식

clean code를 위해 사용!

• 객체 구조분해할당
• 깊은 객체 구조분해할당
• 배열 구조 분해할당

구조분해할당,, 실무에서 쓰고는 있지만 자연스럽게 쓰고있지는 않은 듯하다ㅠㅠ 의식적으로 쓰면서 익숙해지기!