컴퓨터 알아가기/React
-
React 기초 : Props (함수형 Component), State (클래스형 Component)컴퓨터 알아가기/React 2021. 6. 10. 19:30
지난 시간에 함수형 Component를 공부하면서 속성인 Props 에 대해 알아봤습니다. Props는 기본적으로 이름이나 사진 또는 타이틀과 내용같이 고정되어진 데이터를 처리하는데 사용하고 있습니다. 이번에 같이 볼 State는 말그대로 상태를 나타내는 것으로 변경될 수 있는 데이터를 처리할 때 사용합니다. State가 변경되면 render( ) 함수가 다시 실행된다는 이야기입니다. 그래서 State를 사용하게 된다면 클래스형 Component를 사용하게 된다는 점도 머리속에 저장하고 진행해 보는 걸로 하겠습니다. (참고로 Props는 함수형 Component입니다. ) 무슨뜻인지는 Codepen을 통하여 예제를 보면서 이해를 하는 것으로 해 보겠습니다. ▒ Props 개념을 이용한 시간 나타내기 2번..
-
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 (속..
-
React 기초 : function 기능 -> 함수형 Component 정의하기컴퓨터 알아가기/React 2021. 6. 7. 19:30
이제는 기본구조에서 조금은 변형을 해 보겠습니다. 아마도 이 개념까지 보시면 React가 이렇게 구성이 되는구나 하는 느낌이 오실겁니다. ▒ render( )함수 없이 바로 함수기능 사용하기 변수값을 설정해서 음식값을 나타내는 코딩을 해 보겠습니다. 역시 Codepen에서 연습해 보죠. 지난 시간에 class를 지정하고 component를 상속받아 render( )함수를 사용했는데 이 부분을 빼고 function 기능을 바로 사용합니다. ▶ 김치찌개가 8,000원인 내용을 ReactDOM.render( )함수를 이용해서 나타내 보죠. 1. function 함수 component를 만들어서 정의 : foodInfo(food)라는 component 생성 2. 정의된 component를 나타내는 return(..
-
React 기초 : Codepen을 이용한 React 사용설정컴퓨터 알아가기/React 2021. 6. 4. 19:30
지난 시간 React의 기본적 내용에 대해서는 알아보았고 이제부터는 왜 최근에 많은 개발자들이 React 언어를 사용하는지 웹상에서 구현되는 HTML과 CSS 만으로는 어떤 한계가 있는지 하나하나 뜯어보면서 느껴보도록 할 예정이다. 나 또한 전혀 프로그래밍이라는 분야는 너무도 생소한 분야기에 천천히 이해를 하면서 글을 연재하고자 한다. 만일 이 블로그를 보는 분이 있다면 이 연재를 읽는 것만으로 이해가 되면 좋겠다라는 작은 소망으로 시작하고자 한다. 많은 블로그와 구글 유투브에서 참조헤서 진행하는 만큼 완벽하지 않을 수 있지만 작은 프로그램 하나 만드는 기쁨이 반드시 올 것임을 확신하며 초반에 참조는 '동빈나 님의 React 강좌'를 기초로 공부하고 나름 대로 정리한 내역이다. ▒ React 간단 소개 ..
-
React 기초 : 기본구조컴퓨터 알아가기/React 2021. 6. 3. 15:20
오늘은 React 기본구조를 한번 보도록 하겠습니다. 저처럼 프로그램의 깊은 지식이 없는 분들은 어떤 구조로 어떻게 움직이는지 전혀 감을 잡을 수 없습니다. 일단 가장 기본적인 뼈대부터 이해를 하고 가야겠습니다. 설명이 100% 맞을 수 없지만 웹사이트를 만드는 프레임은 HTML, 그 프레임을 꾸며주는 스타일링은 CSS, 그리고 주요 기능을 작동하게 만드는 프로그램인 JvaScript로 구성이 되는데 이 JavaScript를 효과적 효율적 프로그래밍이 가능하게 만드는 언어가 React라는 개념으로 보겠습니다. ▒ React 기본 구조 Codepen에서 개발환경을 설정하였으니 그 곳에서 시작을 해 보도록 하겠습니다. HTML CSS JS(Babel)환경이 설정 되어 있으니 각 section에서 코딩을 해 ..
-
React 언어에 대해서컴퓨터 알아가기/React 2021. 6. 2. 19:30
우리는 간단한 어플을 만들기 위해 React Native라는 프로그램을 통해서 Expo로 안드로이드 앱을 만들어 보았다. 그런데 이제까지 HTML과 CSS에 대한 개념을 이해하기 위해 몇가지 퀴즈도 풀면서 컴퓨터언어에 대한 거부감을 많이 줄여봉ㅆ다. 사실 나는 이정도만 알고 모든 것을 구글링에서 해결할려고 했다... 조금씩 내용을 알다보니 내가 무엇을 찾는지 알아야 구글링을 정확히 하고 어느곳에 정확히 반영하는지 필요성을 느끼게 되었다. 그렇다면 조금 더 기본적인 컴퓨터 언어의 흐름은 알아야하지 않을까 하는 어쩔수 없음에 직면하게 되었다. 휴... 다시 생각해 보면 비록 내가 개발자는 아니지만 내 스스로 조금씩 만들어 내는 결과물에 만족을 느끼게 되니 자연스럽게 더 배우고자 하는 것 같다. 현재까지 이러..