Component
-
React 기본 : React State 개념, JSX문법, Babel컴퓨터 알아가기/React 2021. 6. 29. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난 시간 '좋아요'버튼의 코딩과 브라우저는 다음과 같았습니다. 상기 브라우저의 State는 클릭을 하면 True로 바뀌는 반응을 개발자도구(F12)를 통해 확인할 수 있었습니다. 그렇다면 화면에 클릭을 하면 Like 에서 Liked로 바뀌는 작업을 하도록 하겠습니다. 이렇게 변경이 되는 것을 State로 보면 됩니다. 화면에 직접 그려진다는 것은 Render( ) 함수내에서 이루어진다고 말씀 드렸습니다 . return a("Button", {onClick }, "Like") 이렇게 3구역으로 나뉘어진 곳에 마지막 3번째 "Like"에 다음과 같이 코딩을 합니다. 상기 코딩은 클릭을해서 현재상태가 liked가 참이면 화면에..
-
React 기본 : 고객 Component 구조화 (계층적으로 만들기)컴퓨터 알아가기/React 2021. 6. 22. 19:30
바로 전까지는 Component 폴더내 Customer.js에서 고객 내용을 Props를 이용해서 App.js를 통해 index.html로 결과가 브라우징 되었습니다. 이제 다양한 고객 데이터를 사용하고 하나의 고객데이터에서 처리해야 할 정보가 많게 되면 하나의 고객 Component에서 전부 반영할 수도 있지만 시각적으로나 구조적으로 좋지 않습니다. 이럴경우 구분할 수 있는 카테고리별로 분류하여 각각 구조화(게층화) 시킬 수 있습니다. React에서는 이러한 작업을 계층적으로 구조화 시킬수 있다고 합니다. 강력한 기능이라고 볼 수 있습니다. 아래 그림을 통해 이해를 해보도록 하겠습니다. 기존방식 구조화(계층화) 개념 ▒ 고객 Component 구조화 지난 시간 예제를 가지고 구조화를 한번 해 보겠습니다..
-
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 (속..