전체 글45 [React] 컴포넌트 실습(섹션3-2) 리액트는 컴포넌트 트리 구조를 가진다. root component는 , 브라우저에 직접 렌더링되는 single HTML page이다. 이 외 다른 컴포넌트들은 또 다른 컴포넌트나 루트 컴포넌트에 포함되는 구조. 1. 컴포넌트 기본 사용 로직, 방법 컴포넌트를 생성해서 사용하는 방법은 간단히 3단계이다. 1. 컴포넌트 function으로 html코드 생성 2. export, import 3. import해온 컴포넌트 이용(JSX syntax) // components/ExpenseItem.js function ExpenseItem() { return Expense Item!; } export default ExpenseItem; import ExpenseItem from "./components/Expen.. 2022. 4. 15. [React] 리액트 기초 컴포넌트(섹션3-1) React makes building complex, interactive and reactive user interfaces simpler. 1. 컴포넌트(Component) React is all about "Components". Because all user interfaces in the end are made up of components. : Reusable buildingblocks in user interface. Just Combination of HTML code, CSS code, JS code. Why Components? Reusability: 재사용성 Seperation of Concerns: 우려 분리 -> 작은 단위로 관리 2. 선언형 접근방식(Declarative Appr.. 2022. 4. 14. [React] react-router-dom v6 업데이트 이슈 react-router-dom이 v6 업데이트 되면서 변경된 부분이 2가지가 있다. switch -> routes component -> element import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; function App() { return ( ); } 바뀐 줄 모르고 switch랑 component로 했다가.... swtich 없다는 에러 메시지를 만났고, 이를 routes로 바꿔서 실행해보니 에러메시지는 안 뜨는데 화면에 아예 아무것도 뜨지 않았다. react routes not display 이런 식으로 구글링하다가 버전이 업데이트로 component가 아니라 element로 써야 한다는 것...이건 왜 에러메시.. 2022. 4. 12. [React] npx create-react-app . 에러 npx create-react-app . 명령어를 입력했더니... 이런 에러 메시지가 떴다.. 찾아보니 npm uninstall -g create-react-app npm add create-react-app 위 명령어를 순서대로 입력한 후, 다시 npx crete-react-app . 하니 정상적으로 깔림! 인줄 알았으나....아니다..폴더 구성은 제대로 된 것 같으나... 이와 같은 에러가 떴다. https://stackoverflow.com/questions/71835029/suddenly-react-js-can-not-execute-create-react-app-command-why-this-is-happenin Suddenly react JS can not execute create-react-.. 2022. 4. 12. [React] 기본 자바스크립트 문법 1. let, const 자바스크립트에서 var을 쓸 수 있지만 ES6의 let과 const를 쓰는 것을 권장한다. let: 가변 변수 const: 상수(할당 후 수정X) 노드에서는 주로 const를 쓴다! 위 실행결과를 보면 const의 경우 처음 변수에 할당한 값은 콘솔에 출력되지만, 값을 변경하고 이를 출력하고자 하면 에러가 뜬다. const는 새 값을 할당하면 안된다. 2. 화살표 함수(Arrow Functions) const myFunc = () =>{ ... } 위와 같은 방식으로 사용한다. 함수 이름 다음으로 등호가 등장하고 그 다음 괄호 안에 인수가 있다면 함수 인수를 작성한다. 그리고 화살표 다음에 함수 내용을 담는다. 화살표 함수가 유용한 이유는 기존 자바스크립트 함수 정의할 때보다 길.. 2022. 4. 7. [React] react.js는 무엇인가? https://reactjs.org/ React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React: A JavaScript library for building user interfaces netflix 웹사이트를 이용해보면 전환(transition)이 빠르고 상호작용성(interactivity)이 매우 높고, 작동이 원활하다는 특징 등에 의해서 마치 모바일앱을 이용한다는 느낌이 든다. 모바일앱: great highly react user experience, fun to use, smooth transition 웹사이트: (tranditio.. 2022. 4. 6. 이전 1 2 3 4 5 6 ··· 8 다음
