본문 바로가기

전체 글64

리액트 -Component 간단하게 사용자 정의 태그를 만드는 것! 규칙 -대문자로 함수를 만든다 -propps를 통해 외부로 부터 전달 받을 수 있다. propps는 component에게 속성을 전달한다. -component는 꼭 하나의 태그를 반환 해야함 -class 를 받을 때 className를 사용 -자바스크립트 파일을 작성할 때 {} 중괄호를 사용해야 한다. -state 컴포넌트에서 동적인 값을 state라고 부른다// 상태 관리 라이플사이크에 따라서 이 화면이 값이 변화되었을때 변화된 값을 화면에 리랜더링 시켜 주기 위한 조건들이 있는데 그 조건중 하나가 state 변경 되었을때 usestate는 state를 만들어주기 위해서 리액트에서 제공하는 기능/ 기능이라 안부르고 hook 이라고 부름 원시 .. 2022. 12. 9.
리액트 usesstate Use state ui랑 밀접하게 관련있는 데이터는 state라는곳에 보관해야함 !!!!!!!!!!!!!!! const [count, setCount] = useState(0); //0원하는 초기값지정하면 배열이 리턴됨,첫번째 인자는 값에 접근할수있는 변수와 업데이트 할수 있는 함수 이름은 원하는걸로 Usestate 변경가능한 상태를 쓸때는 usestate를 사용해야흠 Prev 이전상태값 setCount((prev) => prev + 1); 리액트에서 상태를 사용할때는 그냥 일반 변수사용 하면 안된다 리액트에서 제공되는 usestate 를 써야한다 import React, { useState } from "react"; export default function Counter() { c.. 2022. 12. 8.
react React 데이터를 State(내부상태) Props(외부로 부터 전달받은 상태) 나타내는 render가 있다. 상태가 변경될때마다 re-render 된다 실제로 변경된 부분만 화면에 업데이트 된다. Componnent(컴포넌트) 컴포넌트는 JavaScript의 함수와 유사, react 요소들을 받아 반환 받는다 function App() { const name = "teawook"; const list = ["우유", "딸기", "바나나"]; return ( {`hello ${name}`} {list.map(function (item) { return {item}; })} ); } export default App; 함수 컴포넌트 JSX JSX는 페이스북에서 스펙을 정의한 XML과 비슷한 자바스크립ㅌ 확.. 2022. 12. 7.
React React란 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 SPA를 전제로 하고 있고 virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에 렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다. SPA 싱글페이지 어플리케이션은 서버에서 html 페이지를 일일이 다운 받는게 아니다 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시 . 사용자가 페이지 리로딩 할 필요가 없다 . 매끄러움 자바스크립트는 변경사항이 있을때 마다 레이아웃 단계와 페인트 단계를 초래하게 된다. virtual DOM - 가상돔 Component 는 외부에서 사용할 있도록 export 해주어야함 / export 된 Component 를 가져와 사용하려면 imp.. 2022. 12. 5.

티스토리툴바