Starters Starters

동적상태관리 import React from 'react'; function Counter(){ const onIncrease = () => { console.log('+1'); } const onDecrease = () => { console.log('-1'); } return ( 0 +1 -1 ); } export default Counter; ※ onclick으로 함수 연결 시, onClick 대문자로! ※ 만약 onClick={onIncrease()} 이렇게 함수 형태로 쓰면, 브라우저 호출과 동시에 함수 실행된다. useState 함수 호출 import React, { useState } from 'react'; react에 있는 useState 함수를 호출하는 것 ※ useState() 는 배..

조건부 렌더링이란? - 특정 값이 참인지 거짓인지에 따라 다른 결과 보여주는 것 1. 삼항 연산자 사용 - App.js - isSpecial 추가 - hello.js - import React from 'react'; function Hello( {color, name, isSpecial} ){ return ( {isSpecial ? * : null} 안녕하세요 {name} ; ); } Hello.defaultProps = { name: '이름없음' } export default Hello; {undefined}, {false} 등 falsy한 값들은 랜더링 해도 브라우저에 보여지지 않는다. ({0} 은 제외) 위와 같은 상황은 조건에 따라 값을 보여주거나 보여주지 않거나 하는 것 -> 삼항연산자 보다 ..

props = properties 1. App.js 에서 JSX 코드 내에 속성값 넣어줌 import React from 'react'; // import logo from './logo.svg'; // import './App.css'; import Hello from './hello'; function App() { return ( ); } export default App; 2. hello.js 에 파라미터로 props를 사용하고 콘솔로그에 찍어보면 import React from 'react'; function Hello(props){ console.log(props) return 안녕하세요; } export default Hello; 3. 객체 형태로 컴포넌트에 값을 전달했다는 것을 확인할 수 ..

JSX는 HTML 처럼 보이지만 JS코드이다. - 바벨이라는 도구 사용해서 XML코드가 JS로 변환되는 것 html코드를 javascript코드로 변환 지켜야 할 규칙들 1. 모든 태그들을 닫아주어야 한다. - input이나 br 태그도 닫아주어야 한다. Ex) 2. 두 개 이상의 태그는 무조건 하나로 감싸주어야 한다. - 하지만 등으로 감싸게 되면 스타일이 꼬인다던지 하는 문제가 발생될 수 있음 => 처럼 비어있는 태그로 감싸주면 해결(크롬 개발자 도구에서도 별도로 태그 나타나지 않음) ※ return 뒤에 JSX 코드 감싼 괄호는 가독성을 위한 것일 뿐, 코드상에는 문제 없음 3. JSX 내부에서 Javascript코드 사용하는 법 - 중괄호로 감싸서 변수 사용 4. style과 classname 사..

/src 폴더 내에 새로운 .js 파일 생성 맨 위에 React 를 사용한다고 선언 import React from 'react'; React 컴포넌트를 만드는 방법 2가지(함수, 클래스) 함수로 먼저 만들어보자 ※ 컴포넌트 이름은 대문자로, 다음 단어 있으면 또 대문자로 ※ HTML같이 생겼지만, JSX 이라 부름 ※ export default Hello; 는 Hello라는 컴포넌트 내보낸다는 뜻 ※ 맨 뒤에 세미콜론은 있어도 없어도 노상관 - hello.js - import React from 'react'; function Hello(){ return 안녕하세요; } export default Hello; - App.js - import 할 때, 파일명 Hello.js에서 .js 는 생략해도 된다...

1. node.js 설치 2. yarn 설치 window 사용자 - git bash 사용 ※ pwd - 디렉토리 경로 볼 수 있음 1. 폴더 하나 생성(mkdir) 2. 생성한 폴더로 들어가서 npx create-react-app begin-react 입력하면, begin-react 라는 이름의 폴더 생성됨 3. 다시 생성된 begin-react 폴더로 가서, yarn start(또는 npm start) 입력하면 위와 같은 화면이 새로운 브라우저 창에 뜬다. /src/App.js 에서 html 코드 수정하면 내용이 자동으로 바뀌게 된다. 서버 끝낼 땐 Ctrl + c 국(제)룰

JS 로 쓴 코드로 인해 어떠한 값이 바뀐다면 해당 값에 대한 특정 DOM의 속성도 계속해서 바뀌어야함 => AngularJS, backbone 등으로 갑시 바뀔 때, DOM 까지도 변환해줌 ==> React는 그냥 다 날려버림, 처음부터 모두 새로 만들어서 하자는 데에서 시작 - virtual DOM 을 통해 속도가 낮아지는 문제 없이, 업데이트를 어떻게 할 지에 대한 고민 하지 않아도됨 UI가 어떻게 보여질지에 집중할 수 있다. 컴포넌트(일종의 UI조각) 사용