https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications. nextjs.org Next.js는 React.js의 프레임워크 중 하나이면서 최근에 여기저기서 많이 쓰이고있는 유용한 프레임워크이다. 기존의 React.js만으로는 부족했던 CSR(Client-side Rendering)의 단점을 보완해주고 React.js를 사용하면서 SSR(Server-side Rendering)을..
React에서 useEffect는 특정 상태가 변경될때마다 감지하여 다른 event를 수행해주는 Hook이다. useEffect를 사용하기 위해서 import import React, { useState } from 'react'; 기본적인 사용 useEffect(() => { console.log('every event'); }); 위와같이 쓰게 되면 모든 상태변화마다 event가 실행된다. useEffect(() => { console.log('newTodo event'); }, [todos]); }); useEffect에 두번째 인자로 배열을 던져줄수있는데, 이렇게 되면 해당 배열에 있는 상태가 변경될때 마다 event가 실행된다. import React, { Component, useEffect,..
useState는 React에서 상태(데이터)를 관리 할 때 사용된다. 먼저 useState를 사용하기 위해서 import import React, { useState } from 'react'; 다음은 관리할 대상을 기준으로 배열을 선언해준다. // [상태, 이 상태를 핸들링할 명칭] = useState(초기값) const [ counter, setCounter ] = useState(0); 그후 아래와 같이 값을 onClick 이벤트를 만들어준다. import React, { useState } from 'react'; function App() { // [상태, 이 상태를 핸들링할 명칭] = useState(초기값) const [ counter, setCounter ] = useState(0); /..
props는 상위 컴포넌트(component)에서 하위컴포넌트로 데이터를 넘겨줄때 사용한다. App.js // props라는 데이터를 넘겨준다. function App(props) { return ( // name이라는 값과 color값을 전달해준다. ); } Hello.js import React from 'react'; // props에서 원하는 속성만 객체로 받을수 있다. function Hello({ color, name }) { return 안녕하세요 {name}! } export default Hello; import React from 'react'; // 아니면 아래와 같이 props속성을 통채로 받아서 원하는 정보를 꺼내쓸수도 있다. function Hello(props) { return..
리엑트(React)를 사용하기 위해서는 크게 3가지 프로그램의 설치가 필요하다. #1. node.js #2. yarn #3. vscode nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org classic.yarnpkg.com/en/ Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined a..