React (old ver)22 Component 1, function 컴포넌트() Q. 아래 코드 중 .diary 영역을 function()을 이용하여, 컴포넌트화 해보자. import './App.scss'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear(); } return ( { title } { thisYear() } 제목 날짜 상세내용 ); } export default App; A. 컴포넌트 function의 첫 문자는 대문자! 1. 먼저 function()을 생성하여, 처럼 함수에 컴포넌트를 담는다. 이전글에서 설명했듯이, return() 바로 안에는 한 개 이상의 태그가 들어갈 수 없다. 전체를 감싸는 태그, 하나만 삽입되어야 한다(역.. 2021. 10. 29. + MEMO: 배열 state를 변경할 때, 변경함수 기본 활용방법! function 함수명() { let 새로운변수명 = [...기존변수명]; 새로운변수명[0] = '교체될 값'; 변경함수( 새로운변수명 ); } [v2021] state를 이용한 데이터 바인딩 새로고침 없이 데이터를 변동하고 싶을 경우, 해당 데이터는 useState( )를 이용하여 바인딩되어야 한다. 그 방법은 다음과 같다. import React, { useState } from 'react'; import './App.css'; function App().. fresh-mint.tistory.com 2021. 10. 29. state를 이용한 데이터 바인딩 새로고침 없이 데이터를 변동하고 싶을 경우, 해당 데이터는 useState( )를 이용하여 바인딩되어야 한다. 그 방법은 다음과 같다. import React, { useState } from 'react'; import './App.css'; function App() { let [title, setTitle] = useState('state 바인딩이란?'); let [liked, setLiked] = useState(0); return ( { title } { setLiked( liked + 1 ) } }>♥ { liked } ); } export default App; 1. useState( )를 사용할 것임을 선언 import React from 'react'; // before import Re.. 2021. 10. 29. JSX로 html 작성하기 import logo from './logo.svg'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear(); } return ( { title } { thisYear() } ); } export default App; 1. class → className javascript 기반에서 작업하는 것이기 때문에, javascript에 선언되어있는 class는 사용할 수 없다. 이에 react에서는 class가 아닌 className으로 클래스명을 지정해야 한다. 2. style은 camelClass 프로퍼티 명명 규칙을 사용 태그 안에 직접 style을 지정할 땐 이중 중괄호.. 2021. 10. 29. App.js가 메인 페이지 funtion App(){retrun ( @@ )}, @@ 안에 들어있는 html이 main페이지의 html이 된다. 그 이유는 index.js가 App.js를 읽고 public > index.html에 넣어주기 때문. 2021. 10. 29. node-sass를 이용해, scss로 변경 1. node-sass 설치 아래 두 코드 중 원하는 방법으로 설치 ~ yarn add node-sass npm install -s node-sass 2. src에 있는 '.css' 파일을 '.scss'로 변경 3. import '파일명.css'를 '.scss'로 변경 4. 끝 간혹 위와 같은 오류 메시지가 뜨는데, 설치된 Node Sass 6.0.1가 호환되지 않는다는 의미이다. 해결방법은, node-sass v6 미만의 버전으로 재설치 하면 된다. yarn remove node-sass yarn add node-sass@5.0.0 npm uninstall node-sass npm install node-sass@5.0.0 2021. 10. 29. react 설치 및 개발환경 설정 (node 14.17.0으로 설치 진행하였습니다) 1. node 및 vscode 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Wind.. 2021. 8. 11. 이전 1 2 다음
