분류 전체보기
-
React 기본 : 함수형 setState, < >태그, Fragment, 함수형 Ref컴퓨터 알아가기/React 2021. 7. 1. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성되고 있습니다. 지난시간 아래와 같이 구구단 형식을 React를 통해 만들어 보았습니다. 여기서 만일 15인 정답을 입력하면 정답: 15로 나오는 것을 숙제로 받았었는데 코딩에서 다음과 같이 써주면 됩니다. 그럼 브라우저상에는 다음과 같이 나옵니다. ▒ setState함수 : prevState 상기 코딩을 보면 this.state.value는 예전값을 나타내고 나머지는 프로그램상 이루어지는 미래값이 같이 혼용이 되어 쓰이고 있습니다. 구구단 정도에서는 상관이 없는데 프로그램이 무거워지고 복잡해지면 예전값을 return받을 수 있는 로직으로 만들어 주는게 좋다고 합니다. 즉, 다음과 같이 코딩을 해줍니다. 중요포인트는 this.setStat..
-
React 기본 : 구구단 프로그램을 통한 React State와 Class Method 개념 이해컴퓨터 알아가기/React 2021. 6. 30. 19:30
본 써머리는 ZeroCho TV의 React 강의를 기본으로 작성하고 있습니다. React를 배워보고자 하지만 워낙 잘 알지도 못하기때문에 코딩 하나하나 좀 더 파악하고 가는게 목적입니다. 구구단 프로그램을 통해서 코딩 한줄한줄이 어떤 의미인지 알고자 하는게 더 큰 목적이라고 볼 수 있습니다. React에서 State란 변할수 있는 여지가 있는 것이라고 했습니다. 하나의 Form에 구구단의 답을 입력해서 정답과 오답을 나타낸다고 가정할 때 정답과 오답은 변할 수 있는 상태이므로 State라고 할 수 있겠습니다. 기본적인 태그를 나타내 보겠습니다. ① 구구단 클래스 Component를 정의하고 ② 이 내용을 화면에 그리겠다 라는 기본 틀은 다음과 같습니다. ③ this.state를 통해 바뀌는 부분을 정의..
-
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 기본 : React Component에 대한 개념 (HTML속성과의 관계 및 State)과 Chrome React 확장컴퓨터 알아가기/React 2021. 6. 28. 19:30
본 내용은 ZeroCho TV의 React 무료강좌를 기준으로 작성하고 있습니다. 지난시간 연습했던 React 구조로 만든 '좋아요'버튼을 보도록 하겠습니다. 다시 코드를 보면 다음과 같습니다. 버튼을 나타내는 프로그램은 상기 박스내에서 이루어집니다. HTML 코드로 예를 들면 다음과 같이 씁니다. Like 내용은 버튼을 클릭하면 콘솔에서는 clicked로 횟수가 기록이 되고 형태는 서버에 재출한다라는 내용입니다. 이 부분은 위 "null"부분에 { }로 JavaScript언어로 된 JSX 문법을 사용해야 합니다. HTML과의 차이점은 onclick이 onClick으로 camelCase를 사용했고 "="대신 ":"를 사용했네요. 브라우저에서 "좋아요"버튼을 클릭하면 개발자도구(F12) console창에서..
-
React 기본 : React Component에 대한 개념 (React 기본구조)컴퓨터 알아가기/React 2021. 6. 24. 19:30
지난시간까지 React 기본에 대해 무조건 따라헤보다가 Material UI 를 이용하여 테이블 구성에서 에러에 빠졌습니다. 좀 더 기본을 공부해야할 필요성을 느꼈습니다. 여기저기 무료강좌를 찾아보다가 일부 무료강좌를 하고계신 'ZeroCho TV'를 통해 좀 더 기본 개념을 잡아보도록 하겠습니다. 특히, 저처럼 React와 관련되어 아무 개념이 없는 사람에게는 또 한번 놀랄일이 지금껏 React 환경을 만들기 위해 create-react-app을 사용하였는데 처음부터 HTML을 이용하여 React 구성을 마치는 과정이었습니다. ▒ React 기본 구조 React는 프로그래밍 언어라기 보다는 React 홈페이지에 나와 있는 대로 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리'인게 조금 ..
-
React 기본 : 클래스형 Component 정의하는 기본 작업순서 정리컴퓨터 알아가기/React 2021. 6. 23. 19:30
▒ 클래스 Component생성을 위한 React 기본 환경설정 순서 ① React Project를 만들고자 하는 Project Directory를 만든다. ② Project Directory로 이동하여 npm install을 한다. npm install -g create-react-app ③ Project Directory에 npm이 install되면 만들고자 하는 App directory 를 만든다. create-react-app 폴더명 React를 사용하기 위한 필요 파일들을 생성하는 과정 완료가 되면 해당 App directory로 이동 ( cd 명령어 이용) yarn start명령어로 로컬호스트에 접속 ④ VS code 설정 (class component 기본 구성) ★ App.js → func..
-
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. 21. 19:30
지난 시간 Git hub에 올려놓은 파일을 기준으로 고객데이터를 출력하는 예제를 나동빈님의 도움을 받아 작성해 보겠습니다. 작성되는 내용은 src 폴더 App.js를 통해서 public 폴더 index.html로 렌더링되는 개념입니다. 이를 위해서 다음과 같은 순서로 작성해 보겠습니다. ▶ src폴더 내 고객 고객데이터를 위한 폴더 및 파일 만들기 폴더이름을 component로 하고 파일이름을 Customer.js로 만듭니다. VS code에서 직접 입력하면 됩니다. ▶ Customer.js 코드 작성하기 React 라이브러리를 불러와서 작성하고 만들어진 클래스를 export 시키는 개념을 생각하면 됩니다. export시키기 전 만들어지는 코드의 기본은 render( )함수와 return( ) 함수가 필..