일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- reactjs
- Chart.js
- 레이아웃쪼개기
- 성능최적화
- 타입선언
- 누구나 자료구조와 알고리즘
- typescript
- vue.js
- 리액트
- 폰트적용하기
- 2022
- returnType
- 개발콘텐츠
- 커스텀
- 제네릭
- 반복줄이기
- JS console
- NonNullable
- react
- React.js
- TSDoc
- click and drag
- const 단언문
- CSS
- 타입스크립트
- javascript
- 티스토리꾸미기
- utilty type
- 타입좁히기
- 공통컴포넌트
- Today
- Total
목록Development/React.js · Next.js (37)
몽땅뚝딱 개발자
컴포넌트 단위로 element를 return 할 때 하나의 태그로 전체를 감싸지 않으면 에러가 발생한다. 이 때 태그로 감싸면 태그나 기타 의미없는 구분용 태그(가령 )를 추가하지 않아도 된다. ◽ 태그 사용하기 를 사용하기도 한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component, Fragment } from "react"; class ChildComp extends Component { render() { return ( P TAG ) } } export ..
함수형 컴포넌트는 class형 컴포넌트와 달리 아래와 같은 특징이 있다. 1. state가 없다. 2. 생명주기 함수를 사용할 수 없으며 hook을 이용한다. 3. 상위 컴포넌트에서 props와 context를 파라미터로 전달받아 사용한다. 4. render() 함수가 없으므로 return을 사용하여 화면을 그려준다. ◽ 함수형 컴포넌트 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React from "react"; function ChildComp(props) { let { co..
◽ Class형 컴포넌트 Class형 컴포넌트에는 Component외 PureComponent가 있다. ◽ 차이점 두 컴포넌트 모두 props와 state의 변경에 따라 render() 함수를 호출하는데, 변경에 대한 기준이 다르다. 1. Component 비교 대상이 완전히 동일하지 않으면 변경이 발생했다고 본다. setState() 함수로 실행된 값은 이전에 있던 state 변수값과 동일하더라도 컴포넌트에서는 새로운 state 변수가 같은 이름으로 생성됐다고 인식한다. // 1. Component를 import한다. import React, { Component } from "react"; // 2. 상속받는다. class ChildComp extends Component { // 코드 ... } 2..
◽ state 사용하기 import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( React ); } export default App; import React, { Component } from "react"; class ChildComp extends Component { constructor(props) { super(props); this.state = { stateString: this.props.val_string, stateNumber: 200 } } render() { return ( {this.state.stateString} ); } } export d..
드뎌.. 리액트 공부 다시 시작..! 🥺 ◽ Props 데이터를 수정해야할 경우 props 자체가 아닌 컴포넌트 내부 변수(예제에서는 "props_value"라는 변수)에 옮겨 가공한다. import React from "react"; import './App.css'; import ChildComp from './ChildComp' function App() { return ( // JSX Start React ); } export default App; import React, { Component } from "react"; class ChildComp extends Component { render() { // props 인자 받아오기 let props_value = this.props.test_..
◽ 단방향 데이터 흐름 React는 Vue과 동일하게 데이터가 위에서 아래로 단방향으로 흐른다. 단방향으로 흘러야 통제가 쉬우며 값에 오류가 있을 때 그 값의 변경을 책임지는 컴포넌트를 빨리 찾아낼 수 있다. 이는 양방향으로 관리되는 데이터보다 ◽ React의 컴포넌트 React에서 추구하는 컴포넌트는 단일 책임 원칙이다. 이는 하나의 컴포넌트는 한 가지 일을 하는게 이상적이라는 원칙으로, 하나의 컴포넌트가 커지게 된다면 이는 보다 작은 하위 컴포넌트로 분리되어야 한다. 각 컴포넌트가 데이터 모델의 한 조각을 나타내도록 분리하는 것을 추구한다. ◽ 엘리먼트(element) - 리액트에서의 엘리먼트는 리액트 앱을 구성하는 최소 단위이다. - 리액트 엘리먼트는 일반 자바스크립트 객체값을 가진다. const ..
◽ State를 올바르게 사용하기 1. setState()를 활용한다. 컴포넌트를 다시 렌더링하도록 setState()를 사용한다. contructor에서 this.state를 지정할 수 있다. // wrong // 직접적으로 state를 수정하는 이 코드는 컴포넌트를 다시 렌더링하지 않는다. this.state.comment = 'Hello' // Correct this.setState({comment: 'Hello'}); 2. state 업데이트는 비동기적으로 처리될 수도 있다. this.props와 this.state가 비동기적으로 업데이트 될 수도 있기 때문에 해당 값에 의존해서는 안된다. 이를 수정하기 위해서는 객체보다는 함수를 인자로 사용하는 다른 형태의 setState()를 사용한다.그 함수..