일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Algorithm
- MacOS
- DoM
- control
- while
- web
- github
- MIPS
- CSS
- architecture
- Java
- DS
- javascript
- mysql
- html
- for
- DATAPATH
- Linux
- instruction
- python
- XML
- system
- Class
- DB
- Pipelining
- react
- data structure
- computer
- function
- php
- Today
- Total
목록react (17)
YYYEJI
아래와 같은 코드를 작성했다가 JSX expressions must have one parent element 에러를 받았습니다. function Loading() { return 분석중입니다...; } 이 에러는 JSX 문법을 사용할 때 여러개의 컴포넌트가 사용될 때 parent element로 컴포넌트를 감싸지 않아서 등장하는 에러기에 function Loading() { return ( 분석중입니다... ); } tag를 tag 안으로 넣어줬더니 해결됐습니다. ◡̈
event.target.value가 무엇인지 알아보기 위해 아래 코드를 살펴보겠습니다. tag에 onChange 이벤트를 설정해줍니다. const onChange1 = (event) => { console.log(event); }; input tag도 만들어줍니다. input에 입력 값이 들어오면 onChange1가 실행되면서 event 객체를 반환합니다. event 객체는 아래와 같이 생겼습니다. 콘솔(console)에 event.target을 출력하면 event 객체의 target만 불러와서 출력해 줍니다. const onChange1 = (event) => { console.log(event.target); }; 콘솔(console)에 event.target.value를 출력하면 event 객체의 ..
useState() 란? 컴포넌트(component)에서 바뀌는 변수의 값을 관리하는 함수입니다. useState()를 사용할 때는 아래와 같은 형태로 사용합니다. const [data, modifier] = React.useState(initial_value); 예제를 살펴보겠습니다. const data = React.useState(); console.log(data); data를 React.useState()의 변수로 만들어준 후 콘솔(console)에 출력해보면 이렇게 콘솔(console)에 출력됩니다. [undefined, f] undefined는 초기 값(initial value)이고, f는 값을 수정하기 위한 함수입니다. React.useState() 함수에 초기값을 넣어주면 넣어준 초기값이..
리액트(React)에서 함수를 만드는 방법은 두 가지가 있습니다. 화살표 함수(Arrow function) const FunctionName = () => (Action); const Title = () => ( console.log("mouse enter")}> Hello world ); 함수의 타입(type), 함수의 이름, = () => 그리고 함수의 액션(action) 파트로 나뉩니다. 함수의 액션 파트에는 HTML의 유효한 tag를 사용할 수 있습니다. 기본 함수(Normal function) function Button() { return ( console.log("im clicked")}> Click me! ); } function, 함수의 이름, () {Action_part}로 이루어 집니..
리액트(React)에서 영상을 삽입하는데 조금 오래 걸렸던 것 같아서 정리를 해볼까 합니다. 구글에 나오는 코드를 아무리 작성해도 영상이 올라가지 않았었습니다. 우선 코드 설명을 해보자면, src - 동영상의 위치, type="video/mp4" width - 가로 크기 loop - 영상 무한 반복, autoplay - 영상 반복 재생, muted - 음소거 입니다. 여기서 주의해야 할 점이 있습니다. ① 동영상이 존재해야 하는 파일의 위치입니다. React을 생성할 때 생기는 public 폴더 밑에 동영상이 존재해야 됩니다! ② /videos/duck.mp4로 파일의 위치를 설정해줘야 됩니다. vidoes 앞에 경로가 어떻든 신경써주지 않아도 된다는 의미입니다. ◡̈
https://yyyeji.tistory.com/383 [React] 리액트(React) 기본 리액트(React)란? JavaScript 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용되는 웹 프레임워크입니다. 아래 방식은 리액트를 시작하기 전 리액트를 이해하기 위한 리액트를 사용하는 yyyeji.tistory.com 우리는 위에 봤던 코드를 JSX코드로 변경시켜 줄 예정입니다. JSX(JavaScript XML)는 JavaScript에 XML을 추가한 확장한 문법입니다. 우리는 JSX 문법을 사용하지만 웹 브라우저는 JSX 문법을 이해하지 못합니다. Babel을 사용해서 JSX문법을 웹 브라우저가 알아듣을 수 있는 코드로 변경합니다. 에러없이 웹 브라우저가 잘 작동하는 것을 확인할 수 있습니다..
리액트(React)란? JavaScript 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용되는 웹 프레임워크입니다. 아래 방식은 리액트를 시작하기 전 리액트를 이해하기 위한 리액트를 사용하는 어려운 방식입니다. 해보면서 리액트에 대한 이해도를 높이기만 하면 됩니다. 외울 필요가 전혀 없는 코드입니다! 기본적으로 시작하기 위해 기본 html 파일에 첫 번째 링크의 역할은 웹 페이지의 UI와 상호작용(interactive)을 잘할 수 있도록 도와주는 역할을 하고, 두 번째 링크의 역할은 react element를 html 안에서 사용할 수 있도록 도와주는 역할을 하는 library 또는 package입니다. React의 복잡한 문법 React.createElement() React.createEle..
리액트(React)란? JavaScript 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용되는 웹 프레임워크입니다. Node.js 설치하기 https://yyyeji.tistory.com/372 [MacOS] 원하는 버전의 Node.js 설치하기 Node.js란? 서버를 구축하고 서버에서 JavaScript가 작동되도록 해주는 (chrome V8 JavaScript 엔진으로 빌드 된) JavaScript 런타임입니다. ↓↓↓ 설치하기 ↓↓↓ https://nodejs.org/ko/download/releases/ 이전 릴리스 yyyeji.tistory.com React 설치하기 $ npm install -g create-react-app 위에 명령어로 react를 설치해주세요! 아래 명령어는 버..