React/(Udemy)React-The Complete Guide10 [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] 기본 자바스크립트 문법 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 다음
