Props
-
React 기본 : 고객 Component 를 Props 를 이용하여 구조화하는 개념잡기컴퓨터 알아가기/React 2021. 6. 21. 19:30
지난 시간 Git hub에 올려놓은 파일을 기준으로 고객데이터를 출력하는 예제를 나동빈님의 도움을 받아 작성해 보겠습니다. 작성되는 내용은 src 폴더 App.js를 통해서 public 폴더 index.html로 렌더링되는 개념입니다. 이를 위해서 다음과 같은 순서로 작성해 보겠습니다. ▶ src폴더 내 고객 고객데이터를 위한 폴더 및 파일 만들기 폴더이름을 component로 하고 파일이름을 Customer.js로 만듭니다. VS code에서 직접 입력하면 됩니다. ▶ Customer.js 코드 작성하기 React 라이브러리를 불러와서 작성하고 만들어진 클래스를 export 시키는 개념을 생각하면 됩니다. export시키기 전 만들어지는 코드의 기본은 render( )함수와 return( ) 함수가 필..
-
React 기초 : Component 및 Props를 이용하여 게시판 구조 이해하기컴퓨터 알아가기/React 2021. 6. 9. 19:30
이번 시간에는 JSX문법을 사용하고 있는 React의 Component와 props를 이용하여 게시판 구조에 대한 모습을 한번 볼게요. 먼저 게시판의 가장 기본 구성 항목이라고 볼 수 있는 것은 사용자이름과 사진 그리고 게시판 글제목과 내용정도로 구분이 될 수 있을겁니다. 다음과 같은 결과물을 한번 만들어 볼까 합니다. (참고로 React는 나동빈님의 강의를 기본으로 연습하고 좀 더 눈높이에 맞게 이해내용을 가미하여 공유합니다. ) ▒ 게시판 구조 이해하기 1. 필요항목 사진 : image source 필요 이름 : name 속성 사용 게시판 제목 : title 속성 사용 게시판 내용 : content 속성 사용 2. Component를 어떻게 사용할 건가 Component는 하나로 사용해서 필요속성 4..
-
React 기초 : Component와 Props 개념컴퓨터 알아가기/React 2021. 6. 8. 19:30
지난 시간에 Function 기능을 이용한 Component(요소, 부품)에 대해 진도가 들어 갔는데 Component는 JavaScript의 함수와 유사한 기능을 가지고 있다고 합니다. 좀 더 정확히는 Class와 같다고 하는데 사실 저희같은 경우는 JavaScript의 함수와 유사한 기능이라고 해서 감은 안오는게 사실입니다. 좀 더 들어가 봐야겠어요. Props라는 개념은 Property의 약자로 속성, 속해 있는 재산 등을 의미합니다. 쉽게 그려보면 Props라는 속성을 함수 기능을 가진 Component에 부여하면 React 요소로 나타내어질 수 있다 정도로 생각하고 가봅시다. 지난번에 음식이름 (name), 음식값 (price) 을 정의한 것이 전부 Props로 보면 됩니다. ▒ Props (속..