클래스형 컴포넌트3 리액트[기초] state state 란? 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다 클래스형 컴포넌트가 지니고 있는 state와 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state가 있다 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트할 수 있다 클래스형 컴포넌트 state ( state 초기값 설정 방법 1) 컴포넌트에 state의 초기값을 설정할 때는 constructor 메서드(컴포넌트 생성자 메서드)를 작성하여 설정한다 클래스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해주어야 한다. (이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해준다) 컴포넌트의 state는 객체 형.. 2022. 5. 27. 리액트[기초] props props 란? properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수도 있다 props를 렌더링 할 때 에는 JSX 내부에서 {} 기호로 감싸 주면 된다 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용 할 수 있다 자식 컴포넌트에서는 props의 값을 직접 바꿀수는 없다 const MyComponent = (props) => { // 안녕하세요, 제 이름은 React 입니다. return 안녕하세요, 제 이름은 {props.name} 입니다. ; }; export d.. 2022. 5. 27. 리액트[기초] 클래스형 컴포넌트, 함수형 컴포넌트 컴포넌트를 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다 ▷ 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다 차의점 클래스형 컴포넌트 함수형 컴포넌트 state 기능 및 라이프 사이클 기능 사용 가능 [장점] 선언 하기 훨씬 편리하고 메모리 자원도 덜 사용하기 때문에 프로젝트를 완성하고 빌드 한 후 배포 할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다 [단점] state 과 라이프 사이클 API 사용이 불가능 (리액트 v16.8 이후에는 Hooks 기능이 도입 되면서 다른방식으로 비슷하게 사용가능) 임의 메서드를 정의 할 수 있다 render 함수가 꼭 있어야하고 그 안에서 보여주어야 할 JSX를 반환 해야한다 2022. 5. 26. 이전 1 다음 728x90