React21 [React] props 이번에 구매한 C to HDMI 케이블은 정상 작동된다 ^_^ 가만 안둔다 쿠팡... 예제와 함께 이해를 해볼 예정🔥🔥🔥 먼저 앞서 요약해서 말하면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값이다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정은 불가능하다. 반면에 state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경 할 수 있다. 1. props 란? 먼저 App.js에 MyName.js를 import하고 작성해 보자 import React, { Component } from 'react'; import MyName from './MyName'; class App extends Component { render() { return ( ); } } exp.. 2023. 1. 16. [React] component 사전 스터디 팀원분들이 되게 열심히 하신다. 왠지 나까지 좋은 기분,,, 다들 파이팅🔥 1. Component 란? 일단 컴포넌트라는 용어에 대해 먼저 알아보면 cs에서 다룰때는 하드웨어처럼 "독립적인 기능을 수행하는 단위 모듈"을 뜻한다. 소프트웨어는 하드웨어랑 달리 독립적으로 개발되지 않는 경우가 많고, 다른 모듈과의 호환을 생각하며 개발하지 않았다. 그래서 재사용뿐만 아니라 유지보수도 어려웠다. 하지만 소프트웨어의 재사용성을 높이고 유지보수를 용이하게 하게 위해 나온 기술이 바로 컴포넌트(Component)이다. 2. React에서 Component 리액트에서 컴포넌트는 앱을 이루는 최소한의 단위이다. 또한 props나 state와 같은 데이터를 입력받아 DOM 노드를 생성한다. 이러한 컴포넌트들이.. 2023. 1. 16. [React] DOM / Virtual DOM 위워크 커피 맛있어..! 1. React를 위한 DOM개념 DOM이란 (Document Object Model)의 약자로 객체를 통해 구조화된 문서를 표현하는 방법이다. DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거할 수도 있고 동적인 UI에 최적화되어 있지 않기 때문에jQuery를 사용하여 동적인 효과를 줄 수도 있다. 하지만 큰 규모의 웹 애플리케이션 예를 들어 트위터, 페이스북에서는 스크롤을 내리다 보면 수많은 데이터가 로딩이 되고 각 데이터를 표현하는 요소도 많아지게 된다. 이와 같은 요소의 수가 몇백 개, 몇천 개 단위로 많아진 상태에서 DOM에 직접 접근하여 변화를 주다 보면 성능상 이슈가 발생하기 마련이다. 그 이유는 DOM이 절대 속도가 느려서 그런 게 아.. 2023. 1. 16. [React] JSX 3.1 선릉 가락국수 맛집 찾아냄 const element = Hello, world !!; 오늘은 갑자기 코드 먼저 던졌다. 뒤에 설명하기엔 이만한 게 없기에 그랬으니 양해 부탁드립니다. 위에 희한한 태그 문법은 문자열도, HTML도 아니다. 그럼? 이걸 바로 JSX라고 하며 Javascript를 확장한 문법이다. HTMl을 공부하고 사용해 본 사람들은 이걸 굳이 이렇게 쓴다고? 라는 생각을 갖고 있을 수 있겠지만, 이 JSX는 Javascript의 모든 기능이 포함되어 있다. 뒤에서 좀 더 자세하게 예제를 다뤄볼 예정이니 인내심을 갖고 스크롤을 해보자. (JSX는 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것 것을 권장한다.) 1. JSX란? JSX(Javascript XML.. 2023. 1. 16. 이전 1 2 3 4 5 6 다음 반응형
