틈

import React from "react"; /* 별도의 컴포넌트를 컴포넌트 내부에 만들어 준다 */ function User({ user }){ return ( {user.username} ({user.email}) ) } function UserList(){ const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {/* 컴포넌트 안에 내부에 미리 만들어 둔 컴포넌트를 추가한다. * ..

DOM을 직접적으로 선택해야 할 때 import React, { useState, useRef } from 'react'; function InputSample(){ const nameInput = useRef(); const onReset = () => { setInputs({ name:'', nickname : '', }) nameInput.current.focus(); } return ( 초기화 값 : {name} ({nickname}) ) } ref로 속성을 지정해 준 다음, {}.current.{} 작업한다.

동적인 변화 import React, { useState } from "react"; function Counter(){ /* useState ()안의 값은 초기값. * 비구조화 할당을 통해 number값과 setNumber(함수) 값을 추출한다 */ const [number, setNumber] = useState(0); const style = { padding:20 } const onIncrease = () => { setNumber(number+1); } const onDecrease = () => { setNumber(number-1); } return ( {number} {/* onclick을 camel형식으로 바꿔줘야 함. * 함수를 사용할 때 ()를 붙이 경우, mount 되는 시점에 실행..

부모 컴포넌트 function App() { const name = 'react'; return ( ); } 자식 컴포넌트 import React from 'react'; function Hello({color, name}){ console.log(name); return 안녕하세요! {name}; } Hello.defaultProps = { name : '이름없음' } export default Hello; Vue.js를 먼저 배워두길 잘했다는 생각이 듭니다. Vue.js에서 선언하는 Props와는 다른 형식이지만, 이것이 왜 필요하고 무엇이 다른지 알 수 있었습니다. Vue.js에서는 컴포넌트 내부에서 안쪽에 {props:}로 정의하는 방식을 사용했는데, React에서는 함수의 매개변수를 이용한 전달..

1. 열린 태그는 반드시 닫아주어야 한다. - self-closing 가능 - br이나 input 등 html5에서 닫힘을 사용하지 않는 태그도 닫아주어야 한다. 2. 2개 이상의 태그는 반드시 1개 이상의 태그로 감싸져야 한다. - 로 사용해도 가능(fragment) function App(){ return ( 안녕히계세요. ) } - ()는 의미가 없지만 가독성을 위해서 사용한다. 3. 중괄호({})로 감싸면 변수를 꺼낼 수 있다. function App(){ const name = 'react'; return ( {name} ) } 출력 : react 4. 인라인 스타일을 넣어줄 때에는 객체로 선언 후 추가한다. function App() { const name = 'react'; const sty..

pwd - 터미널에서의 경로를 확인할 수 있다. mkdir 디렉토리이름 - 터미널에서 해당 경로에 디렉토리를 만들때 쓰는 명령어 npx create-react-app 프로젝트이름 해당 경로에 React 설치 cd 프로젝트이름 yarn start​ React 개발서버 실행 =>> 브라우저가 실행되면서 로컬호스트 실행