일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 게임
- 비동기
- Project
- slow and steady
- JS #프로젝트
- https://m.blog.naver.com/tt2t2am1118/221010125300
- Import
- execCommand
- 혼프
- Porject
- setTimeout()
- ajax
- addEventListener
- database
- json
- mysql
- async
- object
- db
- prj
- webpack
- 동기
- await
- js
- 참고블로그
- promise
- callback
- sql
- eport
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- Today
- Total
목록⚛️React (46)
C-log
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/wcgiU/btsDnEFFR9e/QvZBhadqghjfvK5LAGqW9k/img.jpg)
이번 시간에 우리는 state를 배우게 되었다. 우선 state가 필요한 이유를 설명하기 위해 아래 코드를 먼저 살펴보자 function App() { const mode = 'WELCOME'//event가 발생 했을 때 변경되는 변수 값 const topics = [ { id: 1, title: 'html', body: 'html is..' }, { id: 2, title: 'css', body: 'css is..' }, { id: 3, title: 'javascript', body: 'javascript is..' } ] return ( { mode = 'WELCOME'; }}> { mode = 'READ'; }}> ); } export default App; //contact App_7.js 해당 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/EYvaV/btsDfUWyFsB/9skRKNcy0TGukIaX50ekfK/img.jpg)
props를 이용하는 방법을 앞시간에 배웠다. 이제는 함수를 이용해서 event처리를 하는 방법을 배우 볼 것이다. 우선 함수를 구현하는 방법은 Header 컴포넌트로 예시를 들어보면 아래와 같다. ... { alert('Header'); console.log('test') } }> ... 우선 우리가 만든 Headr 컴포넌트에 onChangeMode라는 함수를 넣어주고 onChangeMode함수를 props를 컨트롤 할 수 있는 Header컴포넌트로 돌아가서 onChangeMode를 실행시키면 된다. props를 컨트롤 할 수 있는 Header컴포넌트는 아래와 같다. function Header(props) { return section04 { event.preventDefault(); props.on..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/95BTs/btsC4qBskkh/49GHKzxMFTN9L2wFdfTnV1/img.jpg)
이번 시간에는 props를 사용해서 태들을 동적으로 사용할 수 있게 할 것이다. 먼저 우리가 만든 App 컴포넌트를 보자. function App() { return ( ); } 각자 필요한 태그들을 컴포넌트를 사용해서 우리들만의 태그를 생성했다. 여기에 우리는 props를 사용해서 웹브라우저에 나타나는 태그들을 동적으로 줄 것이다. 컴포넌트에 props를 적용하려면 우선 아래와 같아야 한다. function App() { return ( ); } 이렇게 작성한 App컴포넌트를 Header부분의 컴포넌트에 propos를 부여 했을 때의 코드를 살펴보자. function Header(props) { console.log(props) return section04 WEB } 결과는 우리가 App컴포넌트에 기..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/EzyH4/btsDbcIvyrW/vdDredgfoW19w6EgFt9GPK/img.jpg)
이번 수업에서는 리액트의 컴포넌트를 직접 생성하고 만들어본다. 여기서 주의해야 할 점은 내가 만든 컴포넌트를 카멜 표기법으로 작성하면 오류가 뜬다. 올바른 작성 법은 아래와 같다. (참고로 컴포넌트를 불러오는 변수명 또한 파일명과 동일하는게 하는 것이 좋다.) class ClassStyle extends React.Component { // ... } 이렇게 항상 컴포넌트 변수명의 앞글자는 대문자여야만 한다. 이것을 주의하면서 컴포넌트를 작성하고 불러오면 된다. 내가 작성한 코드는 아래와 같다. - myStyle.js //내가 만든 컴포넌트 function Header() { return section04 WEB } function Article() { return Welcome Hello, WEB } ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PQQOI/btsC527HclW/0u1L9Cc71j94MBRIMwFKb1/img.jpg)
* section01부터 setcion02까지의 수업은 OT와 React설치 방법을 강의 했기 때문에 따로 포스팅 하지 않아 section03부터 포스팅을 시작한다. 리액트는 import와 export의 형식으로 이루어져 있다. 즉, 컴포넌트 형식인데 각 컴포넌트는 자체적으로 상태(state)를 가질 수 있고, 재사용 가능하며, 다른 컴포넌트와 조합하여 복잡한 UI를 구성할 수 있다. React 애플리케이션은 이러한 컴포넌트들의 계층 구조로 이루어져 있다. 아직은 상태라던거 훅에 관해서는 수업을 다루고 있지 않기 때문에 우선 scr폴더 안에 있는 App.js와 index.js의 관계를 살펴보면 아래와 같은 형태이다. index.js와 app.js의 코드의 형태는 아래와 같다. App.js import l..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bhq2r7/btsC33swv9V/UE17xKZUcNCHujQDRTUtRk/img.jpg)
Js의 기본적인 문법들을 익혔으니 이제 대표적인 Framework인 React를 공부해보고자 한다. 학교에서 수업을 들은 적도 있고 이전에 ver0 카테고리에서 간단하게 React를 배워서 더욱 깊고 세부적으로 기능들을 나누어서 실습을 해보도록하겠다. React 2022 개정판 www.youtube.com 수업의 목표 : 아직 명확한 목표는 없으나 수업을 진행하면서 작게 게시판 같은 프로젝트를 제작해 볼 것이다. 이외에도 CSR이 무엇인지 생각해볼 것이다.