Recommended
More Related Content
What's hot
What's hot (20)
Similar to 04 component
04 component
- 3. 실행 결과
- 4. props
- 5. props Properties를 줄인 표현으로 컴포넌트의 속성을 설정할 때 사용하는 요소 부모 컴포넌트에서만 설정이 가능함
- 6. JSX 내부에서 props 렌더링 props에 접근할 때는 this키워드를 사용하여 접근할 수 있다.
- 7. 컴포넌트 사용할 때 props 값 설정
- 9. Props 기본 값 설정: defaultProps props에 name을 제거하고 컴파일 하면
- 10. Props 기본 값 설정: defaultProps
- 11. Props 기본 값 설정: defaultProps transfrom-class-properties
- 12. Props 검증: propsTypes transfrom-class-properties Props 검증을 위해서는 prop-types 모듈을 import 해야한다.
- 16. 필수 props 등록
- 17. 필수 props 등록
- 18. 필수 props 등록
- 19. propTypes 의 종류 array: 배열 bool: 참, 거짓 func: 함수 number: 숫자 object: 객체 string: 문자열 symbol: ES6 문법의 심벌 객체 node: 렌더링할 수 있는 모든 것 element: 리엑트 요소 instanceOf: 특정 클래스의 인터페이스 oneOf: 주어진 배열 요소 값 중 하나 oneOfType: 주어진 배열안의 종류 중 하나 arrayOf: 주어진 종류로 구성된 배열 objectOf: 주어진 종류의 값은 가진 객체 shape: 주어진 스키마를 가진 객체 any: 아무 종류
- 20. props는 읽기 전용으로만 사용이 가능!
- 21. props는 읽기 전용으로만 사용이 가능! 내부에서 데이터를 업데이트 하려면 state를 써야함
- 22. state 반드시 this.setState()를 사용해서 업데이트를 해야함 this.setState()사용하지 않고 직접 업데이트시 리렌더링이 발생하지 않음!
- 23. state 반드시 this.setState()를 사용해서 업데이트를 해야함 this.setState()사용하지 않고 직접 업데이트시 리렌더링이 발생하지 않음!
- 24. state 사용하기 state는 컴포넌트의 생성자에서 초기화를 할 수있다!
- 25. state 사용하기 state는 컴포넌트의 생성자에서 초기화를 할 수있다! 생성자를 사용하기 위해 super()로 Component 에게 props를 전달한다.
- 26. state 사용하기
- 27. JSX 내부에서 랜더링 this.state.stateName 을 사용하여 state에 접근할 수 있습니다!
- 28. JSX 내부에서 랜더링
- 29. state 값 업데이트
- 32. create-reat-app 에 webpack 설정이 되어있으므로 별도의 설정은 필요 없다!
- 33. state 값 업데이트시 주의할점 반드시 this.setState()를 사용해서 업데이트를 해야함 this.setState()사용하지 않고 직접 업데이트시 리렌더링이 발생하지 않음!
- 34. state 값 업데이트시 주의할점 반드시 this.setState()를 사용해서 업데이트를 해야함 this.setState()사용하지 않고 직접 업데이트시 리렌더링이 발생하지 않음! 단, 필요에 따라 this.forceUpdate() 메서드를 호출하여 강제로 리렌더링이 가능 이것은 매우 비효율 적이다.