우사미 코딩

1. 경로 1) same directory - ./ 2) up one directory - ../ 2. export js파일에서는 함수와, 변수 모두 export할 수 있다. 3. import import 할 때는 함수명은 변경할 수 있고 변수명은 변경이 불가하다! App.js에서 fuction App()라는 이름으로 정의된 함수더라도 import MyApp from './App'; 으로 이름을 바꿔서 불러올 수 있는데, 이건 다양한 패키지에서 동일한 함수명이 있을 때 중복을 피하기 위해서 사용한다. 이렇게 함수명은 변경할 수 있지만 변수명은 변경이 불가함! 패키지를 불러올 때는 경로를 입력하지 않고 바로 import React from 'react'로 사용할 수 있는데 이건 node_modules폴더에..

1. Layout function App(){ const name = 'usami'; const age = 5; return ( My name is {name} and I'm {age}! ) } 변수를 선언하고 보여질 컴포넌트에 컨텐츠를 업데이트하는데 오잉 컴포넌트는 대부분 비슷한 레이아웃을 하고있네영 그럼 뭐다? 재활용이 가능하게 컴포넌트화 하면 된다! 암튼 이건 컴포넌트에서 다시 다룰거임 html input태그에 속성을 입력하는 것을 jsx에서는 props라고 하는데 이걸 어떻게 사용하는지 보겠습니당 1. 변수로 속성 설정하기 function App(){ const inputType = "number" const minValue = 5; return } 2. curly braces로 속성을 array..

저번에 index.js파일을 만들고 h1태그를 반환하는 리액트 함수를 만들었단 말이져\? 저렇게 태그로 반환되는걸 jsx라고 한다네염 그럼 이렇게 반환된 코드는 이렇게 표현된다고 함;;; 여튼 이론은 이러하고 message라는 변수를 선언해서 string값으로 설정한 후 h1 태그에 출력해보자. * 변수 선언과 출력 function App(){ this is an element! // it dosen't show on the screen, because it's not returning on line 14 let message = 'Bye there!' let num = Math.random() if(num > 0.5){ message = 'Hello there!' } console.log("num : ..

1. 태그를 컴포넌트화(부품화)하여 코드 재사용율을 높이고, 코드 수정이 쉽게 한다. 전 직장에서 소프트웨어 개발할 때 모든 ui를 부품화하여 개발했는데 그거랑 비슷한 개념임. 굿! 버튼에 클릭 이벤트를 넣는다던가 별도의 함수를 호출한다? 그럼 해당 컴포넌트에 함수를 작성하면 됨. 굿! 2. 웹에서 ui를 실시간으로 고치는 작업은 비용이 크다고 한다. 그런데 react를 사용하면 ui를 새로 그리는 비용이 줄어든다고 함. 3. jsx function App() { return ( Hello ); } React에서 위와 같이 html코드를 return하는 스타일을 jsx라고 하고 파일명도 .jsx로 되어있다. 4. component import React from "react" import TodoItem..