728x90 반응형 SMALL 전체 글37 [React] 기본 Hooks State를 다루는 차이 class class ExState extends React.Component { state = { count: 0 }; render() { const { count } = this.state; return ( {count} ClickButton! ); } click = () => { this.setState({ count: this.state.count + 1 }); } } function import React from 'react'; function ExState() { const [count, setCount] = React.useState(0); // 배열 return ( {count} ClickButton! ); function click() { setCount(cou.. 2022. 7. 25. [React] 라이프사이클(Lifecycle) 컴포넌트 라이프사이클(Component LIfecycle) 리액트 컴포넌트는 그려지는 순간부터 사라지기까지 여러 지점에서 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해 줍니다. 마운트(mount) constructor : 생성자 메서드로 컴포넌트 생성 시 가장 먼저 실행됩니다. getDerivedStateFroProps : 새 props를 받았을 때 호출되며 받아온 것을 state에 넣고 싶을 때 사용합니다. render : 컴포넌트를 렌더링 합니다. componentDidMount : 컴포넌트의 첫 렌더링이 끝나면 호출됩니다. 업데이트(update) getDerivedStateFromProps : props나 state가 변경되어도 호출됩니다. shouldComponentUpdate : 컴포넌트.. 2022. 7. 25. [React] Props와 State Props와 State 란? props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다. State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. 둘 모두 변경이 발생하면 리 렌더링이 일어날 수 있습니다. Component(컴포넌트)란? 버튼이나 텍스트 박스와 같이 높은 범용성의 요소를 컴포넌트로 정의해 부품처럼 만들 수 있습니다. 재사용이 가능한 API라고 볼 수 있으며 컴포넌트 내에 생김새 및 작동방식을 정의합니다. 그리고 컴포넌트 내에 컴포넌트가 들어갈 수 있습니다. 컴포넌트를 정의하는 가장 간단한 방법은 function을 사용하는 것입니다. function Hello(props) { return Welcome!; } 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React엘.. 2022. 7. 21. [TypeScript] 클래스 클래스(Class) object를 만드는 청사진, 설계도 클래스 이전에는 함수를 통해 객체를 만들었다. OOP(객체 지향 프로그래밍)을 위한 기본. TypeScript에서는 클래스도 타입의 하나이다. class Human { //클래스의 이름은 대문자로 시작. name; constructor(name: string) { this.name = name; //this는 생성된 객체 자신을 가리킴. } } const h1 = new Human("Jack"): // 함수를 객체로 만들 때 처럼 new를 쓴다. console.log(h1); // Human { name: "Jack"} class 키워드를 통해 생성 가능. 이름은 주로 대문자를 이용. new를 사용하여 object 생성. constructor를 이.. 2022. 7. 20. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 728x90 반응형
