리엑트 개념 재정리

리엑트 폴더 구조 

 

: 필요 없는 파일 제거 

 

 

리엑트 중요 개념 정리

 

1. 사용자 입력 

1) 다양한 사용자 입력 처리하기 

 

- 한 줄 입력 처리하기

: value prop 으로 전달 

: onChange - 값이 바뀌었을 때 수행하는 이벤트  

 

import { useState } from 'react';

const [author, setAuthor] = useState("");

const handleChangeState = (e) => {
    setAuthor(e.target.value);
};

<input
    value={author}
    onChange={handleChangeState}
    name="author"
    placeholder="작성자"
    type="text"
 />

- 여러 줄 입력 처리하기

 

import { useState } from 'react';

const [content, setContent] = useState("");

const handleChangeState = (e) => {
    setContent(e.target.value);
};

<textarea
    value={content}
    onChange={handleChangeState}
    name="author"
    placeholder="내용"
    type="text"
 />

- 선택 박스 입력 처리하기

- 사용자 입력 데이터 핸들링 하기 

 

 

2. DOM 조작하기

: useRef 사용 

 

import { useRef } from 'react';

const handleSubmit = (e) => {
    e.preventDefault();

    if (state.author.length < 1) {
      authorInput.current.focus();
      return;
    }
  };

<input
  ref={authorInput}
/>

 

 

3. 배열 리스트 처리

 

map
- 자바스크립트 배열 내장함수
- 리엑트에서 동적인 배열을 렌더링해야 할 때는 자바스크립트 배열 내장함수인 map을 사용하여 일반 데이터 배열을 리엑트 엘리먼트로 이루어진 배열로 변환해준다.

실제로 리엑트에서 배열은 게시글, 리스트, 피드를 표시하는데에 자주 사용된다. 

 

{diaryList.map((it)=>(
    <div>
        <div>작성자: {it.author}</div>
        <div>내용: {it.content}</div>
        <div>감정: {it.emotion}</div>
        <div>작성시간(ms): {it.created_date}</div>
    </div>
))}

 

defaultProps
: undefined로 전달될거 같은 props들의 기본 값(=초기값)을 설정해주는 기능 

 

DiaryList.defaultProps={
    diaryList:[], 
};

map에서 key가 필요한 이유
: 배열의 원소에 고유한 값이 없을 경우에는 중간의 값이 바뀌었을 때 그 하위 값들이 전 부 변하기 때문에 고유 값이 필요하다.

배열을 Item으로 분할하기
: 삭제, 수정하는 기능들까지 넣어야하므로 별도의 컴포넌트로 분리한다.

 

{diaryList.map((it)=>(
    <DiaryItem key={it.id} {...it} />
))}

 

 

모든 데이터를 스프레드 연산자를 통해서 전달해준다. 
그러면 it이라는 객체에 포함된 모든 데이터가 props로 전달된다.

 

4. 리엑트 라이프 사이클과 API
5. 성능 최적화
6. 컴포넌트 트리에 전역 데이터 공급 

 

 

 

출처

 

https://velog.io/@fltxld3/React-%EB%B0%B0%EC%97%B4-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-List-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%A1%B0%ED%9A%8C

[React] map( )을 이용한 배열 렌더링 (feat.일기장)