YoonStudyNote

  • 홈
  • 태그
  • 방명록

2021/02/11 1

컴포넌트 분리하기 (구조화하기) feat.map & key

컴포넌트를 적절히 잘 분리하면 유지보수도 쉬워지고, 생산성도 높아지는 특징이 있습니다. JSX 문법의 특징중 componenet를 추가하려고하면 div태그 안에 넣어서 해야합니다. 안그러면 오류납니다. 또한, 다음과같이 클래스를 분리해서 필요한 클래스를 최종 클래스안에 계층적으로 나타내는것이 좋은 방법입니다. 다음은 복수로 나타내기때문에 배열로 표현하겠습니다. 여기서 보면 알 수 있듯이, 여러번 customer컴포넌트를 입력해야하는 불편함이 있습니다. **map을 이용해봅시다** 다음과 같이 선언하면 오류가 납니다. 이것에 대한 식별값인 key값이 없기 때문입니다. *key를 사용해봅시다* 아까전에 소스코드보면 알 수 있듯이, id값은 각각 다르기 때문에 key값으로 합니다.

React/컴포넌트 2021.02.11
이전
1
다음
더보기
프로필사진

YoonStudyNote

  • 분류 전체보기 (501)
    • Android (30)
      • Kotlin (18)
      • Android studio (5)
      • BMI 계산기 (6)
      • 로또번호 추첨기 (1)
    • Intellij (2)
      • 테스트 코드 (0)
      • 문제점해결 (2)
    • SpringBoot (6)
      • JPA (6)
      • 머스테치 (0)
    • React (28)
      • 기초 (10)
      • create reate app 실습 (4)
      • 컴포넌트 (4)
      • state (2)
      • 이벤트 (3)
      • create 구현 (3)
      • REST API (2)
    • Redux (3)
    • NPM (4)
    • Javascript (50)
      • 기초 (15)
      • 연산자 (3)
      • 조건문 (2)
      • 반복문 (0)
      • 함수 (2)
      • 객체 (5)
      • 배열 (6)
      • 프로토타입 & 클래스 (3)
      • 비동기 처리 (10)
      • HTML과 JavaScript 연동하기 (1)
      • 책관리 project만들기 (0)
    • HTTP (3)
    • REST API (5)
    • Ajax (6)
    • ip (2)
    • HTML (80)
      • 기초 (16)
      • 요소 (62)
      • 메타데이터 (2)
    • CSS (84)
      • 기초 (17)
      • 실습 환경 (3)
      • 단위 (3)
      • 속성 - 박스 모델 (10)
      • 속성 - 글꼴,문자 (7)
      • 속성 - 띄움(정렬), 위치 (6)
      • 속성 - 배경 (7)
      • 속성 - 전환 & 변환 (8)
      • 속성 - 애니메이션 & 다단 (8)
      • 속성 - flex (15)
    • HTML & CSS (3)
      • 기초 (3)
    • SASS (23)
      • 문법 - 연산 (5)
      • 문법 - 재활용 (4)
      • 문법 - 확장 (1)
      • 문법 - 함수 (2)
      • 문법 - 조건문 (1)
      • 문법 - 반복문 (3)
      • 문법 - 내장함수 (0)
      • 문법 - 중첩 (1)
      • 문법 - 변수 (1)
    • 부트스트랩 (10)
      • 레이아웃 (1)
      • 컴포넌트 (5)
      • 실습 (2)
      • Bootstrap 활용 (2)
    • github 구버전 만들기 예제에서 개념 확인 (0)
      • head 설정 (0)
      • 공통 (0)
      • header (0)
      • visual (0)
      • feature (0)
      • where is (0)
      • pricing (0)
      • footer (0)
      • 반응형 (0)
    • java (57)
      • GUI (9)
      • 이벤트 처리 (4)
      • 자료형 (7)
      • 자바 기초정리 (5)
      • 제어문 (5)
      • 객체지향 프로그래밍 (10)
    • python (18)
      • 제어문 (1)
      • 파일 (6)
      • 자료 종류 (6)
    • 자바 어플 개발 (20)
      • 기초 (8)
      • JAVA의 사용 (5)
      • 안드로이드 스튜디오 기초 (3)
      • 안드로이도 스튜디오 개념 (4)
    • C (29)
      • 기초 (20)
      • 입출력 (2)
      • 포인터 (4)
      • 문자열 처리 (2)
      • 리스트 (1)
    • Compiler (0)
      • Overview (0)
      • Formal language (0)
      • Regular Expression (0)
    • Computer Structure (9)
      • 컴퓨터 시스템 (8)
    • Data Structure (12)
      • 자료구조란? (1)
      • 구조체 사용 (2)
      • stack (5)
      • list (2)
      • queue (1)
      • 연결리스트 (1)
    • 네트워크 기초 (1)
    • git (0)
    • C++ (4)
      • 프로그램 연습 (4)

Tag

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2021/02   »
일 월 화 수 목 금 토
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

방문자수Total

  • Today :
  • Yesterday :

Copyright © AXZ Corp. All rights reserved.

컴퓨터 공학과 윤서혜입니다. 주내용은 Front end, Back end, Android 입니다. 다양한 언어 및 알고리즘 설명도 있으니 도움되셨길 바랍니다.

티스토리툴바