전체 글322 state state : 컴포넌트 내부에서 바뀔수 있는 값을 의미. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다. props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다. state에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state 두가지가 있다. 컴포넌트에 state를 설정하기 위해서는 constructor 메서드를 설정 해야 한다. 또한 constructor(생성자) 작성시 super(props)를 반드시 호출 해주어야 한다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 준.. 2019. 10. 27. props props : properties를 줄인 표현으로 컴포넌트 속성을 설정시 사용. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있습니다. import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; import React from "react"; const MyComponent = props => { return 안녕하세요, 제 이름은 {props.name} ; }; export default MyComponent; 아래와 같이 default props를 설.. 2019. 10. 27. 모듈 내보내기, 불러오기 모듈 내보내기 export default MyComponent; 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정. 모듈 불러오기 import React from 'react'; import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; 2019. 10. 27. 클래스형 컴포넌트 컴포넌트 : 함수형, 클래스형 컴포넌트 2가지 존재 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 같다. 클래스형 컴포넌트의 경후 state 기능 및 라이프 사이클 기능과 임의 메서드를 정의 할 수 있다. 반드시 render 함수가 필요하며, 그안에서 보여주어야 할 JSX를 반환 해주어야 한다. 함수형 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편하다. 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용한다. 프로젝트 완성하여 빌드 후 배포시에도 함수형컴포넌트를 사용하는 것이 파일 크기가 더 작다. (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면서에 사실상 별 차이가 없다.) 단점 state와 라이프 사이클 API의 사용이 불가능 하다. (v16.8 이후 Hooks를 통해 조금.. 2019. 10. 27. 이전 1 ··· 40 41 42 43 44 45 46 ··· 81 다음