JavaScript
-
StateJavaScript/React 2022. 12. 23. 09:03
state - 내부에서 바뀔 수 있는 값을 의미 1. 클래스형 컴포넌트가 가지고 있는 state 2. 함수 컴포넌트에서 가지고 있는 useState라는 함수를 통해 사용하는 state 클래스형 컴포넌트의 State 실습1 // counter.js import { Component } from 'react'; class Counter extends Component { constructor(props){ super(props); // state의 초깃값 설정하기 this.state = { number:0 }; } render(){ const { number } = this.state; return ( {number} { // this.setState를 사용하여 새로운 값 할당 this.setState({ ..
-
Fetch함수JavaScript/Webdevelopment 2022. 12. 18. 14:00
Fetch함수란?! - 서버에 request를 보내고 response를 받는 함수 홈페이지를 볼 수 있는 이유는?! - 웹브라우저가 해당 홈페이지 서버에 요청을 보내고, 서버가 보내준 응답을 해석했기 때문이다 - 웹 브라우저가 서버로부터 받은 응답의 내용으로 네이버 홈페이지에 필요한 HTML, JS등 이 코드들 - 이러한 코드들을 브라우저가 해석하여 우리가 보는 홈페이지를 만드는 것 fetch함수 해석 fetch('https://www.naver.com') .then((response) => response.text()) .then((result) => { console.log(result);}); 1. fetch('https://www.naver.com') - fecth함수가 받는 인자, url로 요청..
-
이벤트(Event)JavaScript/React 2022. 12. 17. 16:58
이벤트(event)란?!\ 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어, 버튼에 마우스 커서를 올리면은 onmouseoㅍer이벤트를 실행, 클릭했을때는 onclick 이벤트를 실행 cf. DOM(Document Object Model) 웹페이지에 나타나는 HTML문서 전체를 객체로 표현한 것 HTML에서는 이벤트를 실행하면 " " 사이에 있는 JS를 실행하도록 코드를 작성한다 Click me REACT에서 지원하는 이벤트 종류 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection Touch, UI, Wheel, Media, Image, Animation, Transition 실습 1. 컴포넌트 새..
-
구조분해(Destructing)JavaScript 2022. 12. 17. 13:51
디스트럭칭 배열과 객체에 적용하는 방법이 다름 1. 배열 2. 객체 ======================= 배열보깅 // 배열의 일반적인 할당 방법 const rank = ["연아", "연아2", "연아3",] const macbook = rank[0] const macbook1 = rank[1] const macbook2 = rank[2] console.log(macbook); console.log(macbook1); console.log(macbook2); // 구조 분해 할당 방법 const rank = ["연아", "연아2", "연아3"] const [macbook, macbook1, macbook2] = rank; console.log(macbook); console.log(macbook1)..
-
프라퍼티(Props)JavaScript/React 2022. 12. 17. 12:14
프라퍼티(Props) - properties 의 줄임말으로써 컴포넌트 속성을 설정할 때 사용하는 요소 - props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 props 지정해주기 - props 지정해주기전. 부모 컴포넌트는 App 컴포넌트이다 // Mycomponenet.js const MyComponent = () => { return 나의 첫 컴포넌트 } export default MyComponent; // App.js import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; step 1. JSX내부에서 props 렌더링 // MyComponent.js const M..
-
컴포넌트(component)JavaScript/React 2022. 12. 16. 19:42
리액트 엘리먼트(React Element) - JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 되며 이러한 자바스크립트 객체를 리액트 엘리먼트 - 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것 - 리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소 일반적인 JSX 형태 import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); JSX문법만 따로 변수에 담기 - 여기에서는 element 변수가 리액트 엘리먼트(React Element)가 된다 import ReactDOM..
-
JSXJavaScript/React 2022. 12. 15. 00:26
import logo from './logo.svg'; import './App.css'; function App() { return ( 안녕리액트!! Edit src/App.js and save to reload. Learn React ); } export default App; # 코드 이해 - 아래처럼 모듈을 불러와서 사용하는 것은 원래 브라우저(browser)에는 없던 기능. 이는 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능. 참고로 Node.js는 import가 아닌 require라는 구문으로 패키지를 불러 올 수 있다 import logo from './logo.svg'; import './App.css'; JSX - JS에서 사용하는 HTM..
-
리액트시작하기JavaScript/React 2022. 12. 14. 23:55
리액트란 처음엔 페이스북 내부 => 오픈소스 => 새로운역사시작! 직전에는 구글의 Angular을 많이 사용함 React영역은 모바일까지 뻗어나간다(React Native) 원래 안드로이드랑 IOS랑 따로따로 만들어야 했는데 React Native를 활용하면 한번에 할 수 있음 node.js 설치하기 Node js란 크롬 v8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임 이것으로 웹 브러우저 환경이 아닌 곳에서도 JS를 사용하여 연산할 수 있다. 09년에 Node.js를 출시한 이유 JS는 웹 브라우저 영역 외에, 웹 서버, 모바일 애플리케이션, 데스크톱 어플레킹션 영역에서도 엄청나게 활약 리액트는 웹 브라우저에서 실행하는 코드이므로 Node JS와 직접적인 연관은 없지만 플젝을 개발하는데 필요한 ..