컴퓨터 알아가기/React
-
React 기본 : React Web-pack 기본 설정하기컴퓨터 알아가기/React 2021. 7. 15. 19:30
본 내역은 ZeoCho TV의 무료웹강의를 기본으로 하고 있습니다. 드디어 Web-pack이라는 개념까지 와버렸네요. 아직 느낌은 React 1도 모르겠는데 말입니다. 아주 기본적인 개념은 지금까지 연습한 React는 Component 1개를 가지고 연습을 했으나 실제적으로 활용되는 Component의 개수는 표현할 수 없을 정도로 많다고 합니다. Facebook 자체가 2만개 이상의 Component로 이루어졌다고 하니 말입니다. 이럴경우 코딩상에서 전부 Component를 정의하고 관리하고자 하면 불가능에 가까울 수 밖에 없겠죠? 이러한 비효율적 코딩작업을 방지하기 위해 개발된 것이 웹팩(Web-pack)이라는 개념입니다. 즉, 하나의 Package로 프로그래밍을 지원하는 개념인거죠. 이러한 웹팩을 ..
-
React 기본 : React Hooks로 구구단 만들기컴퓨터 알아가기/React 2021. 7. 12. 19:30
본 Summary는 ZeoCho TV 무료 웹강의를 기본으로 정리한 내역입니다. Class형으로 만들어진 구구단과 Hooks로 만들어진 구구단의 코딩 내역을 보면서 두 코딩간의 차이점과 장단점을 보고자 합니다. 지난시간 Hooks를 사용하기 위해 함수형 Component 형태로 다음과 같이 state를 구성하였습니다. 상기 그림을 다시 설명하면 함수형 Component의 이름은 GuGu로 하고 각각의 객체를 별도로 정의하였습니다. 브라우저로 확인을 하면 첫번째와 두번째수가 랜덤하게 화면에 표시되며 Value와 Result는 공백으로 화면에 표시되지 않습니다. 한번에 객체러 묶은 setState가 없어지고 각각 분리하여 setFirst, setSecond등으로 나뉘어져 있습니다. 이제부터 return( )..
-
React 기본 : React Hooks의 개념컴퓨터 알아가기/React 2021. 7. 5. 19:30
※ 본 내용은 ZeroCho TV의 React 무료강좌를 기본으로 하고 있습니다. 지금까지의 React는 Class형 Component로 된 내역을 공부해 보있습니다. 하지만 최근 React에서는 Class보다는 Hooks라는 작업으로 변하고 있다고 합니다. 대표적인 구축 사이트는 facebook 입니다. 따라서 Hooks가 과연 어떤것인지 이해를 하고 넘어가야 될 것 같습니다. ▒ Hooks 정의 Hooks는 Class형에서 전체 객체를 state로 정의하고 setState로 선언한 방식에서 함수형 Component를 따르면서 각각을 별도로 정의하여 진행하는 방식이라고 볼 수 있습니다. 문장으로는 잘 이해가 가지 않습니다만 지난 시간 구구딘 형식을 빌려 차이점을 확인하도록 하겠습니다. ▶ 함수형 Com..
-
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 라이브러리'인게 조금 ..