리액트

0906 리엑트2일차

초롱씨 2023. 9. 6. 14:30
728x90
반응형

프리븐디폴트 : 태그가 가지는 기본기능을 막는다

 

package.json

1프로젝트에 사용되는 라이브러리 목록

2프로젝트 실행에 필요한 명령어 목록

 

프로젝트 저장 또는 타인에게 전달 할때 node_modules 폴더 삭제후 전달

그후 npm install로 복구한다.

package.json

package-lock 같이 전달할 것을 권장.버전이 안맞을 수 있으

 

ctrl j 눌러 터미널을 연다.

 

npm run start

 

index.html

index.js

app.js

 

npm install --save reactstrap

 

html -> bootstrap

reat-> reactstrap

 

html 직접 css작성

react 직접 컴포넌트 작성

 

jsx 안에서는 {}중괄호를 사용하여 스크립트 작성을 해야한다.

 1.라이브러리(컴포넌트) 다운로드
    npm install --save reactstrap bootstrap   (2개 설치)
2. 사용하려는 위치(ooo.js)에서 아래 코드 작성
    import { Alert } from 'reactstrap';
    import 'bootstrap/dist/css/bootstrap.min.css';

 

jsx 내부에서 자바스크립스 사용은 {} 중괄호

문자출력상황에서는 `백틱 ` ${}

 

map

변수에 props 대신 data를 직접 넣을경우 {}중괄호를 사용하여 {list}로 넣을시 props.list 할 필요없이 list.map이 가능하다

반복문을 사용할시 오류가 나온다.

React에서 반복문을 사용할 때 key 값을 사용하는 이유는 다음과 같습니다:

  1. 엘리먼트 식별: React는 컴포넌트가 업데이트될 때 변경된 부분만을 업데이트하는 효율적인 렌더링을 지원합니다. 이를 위해 React는 각각의 엘리먼트에 고유한 식별자(key)를 할당하여 엘리먼트 간의 차이를 식별합니다. 이러한 식별자를 사용하여 React는 필요한 경우 해당 엘리먼트만 다시 그립니다.
  2. 렌더링 최적화: key를 제공함으로써 React는 새로운 엘리먼트를 추가하거나 순서를 변경하는 경우 더 효율적으로 업데이트할 수 있습니다. key가 없으면 React는 엘리먼트를 전체적으로 다시 그려야 하므로 성능에 부담을 줄 수 있습니다.
  3. 엘리먼트 고유성 보장: key를 사용하여 각각의 엘리먼트가 고유하다는 것을 보장할 수 있습니다. 이는 엘리먼트가 서로 혼동되지 않도록 하고 예기치 않은 동작을 방지하는 데 도움이 됩니다.

예를 들어, 배열의 각 항목을 매핑하여 엘리먼트를 생성할 때 key를 제공하는 것이 좋습니다. 예를 들어 다음과 같이 사용할 수 있습니다:

 

스테이트는 컴포넌트가 가지고 있는 내부 저장공간이다. state가 변되면 컴포넌트 다시 생성하기 위해 새로고침된다..

 

3. useState 함수를 가져온 후 사용

    import { useState } from ‘react’; 

   - useState 함수 호출 결과는 배열이며

     첫번째 요소는 state의 값, 두번째 요소는 값을 변경할 수 있는 함수

     ex) const [name, setName] = useState('기본값');

 

728x90
반응형