기술블로그 (44) 썸네일형 리스트형 React State & Props How to use props props를 사용하는 3단계 순서 1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다, 2. props를 이용하여 정의된 값과 속성을 전달한다. 3. 전달받은 props를 렌더링한다. function Parent() { return ( I'm the parent ); }; function Child() { return ( ); }; , 컴포넌트 선언. Click me to visit Code States HTML 속성과 값 다루는 법 React에서 JSX 속성 및 값을 할당하는 방법 1 React에서 JSX 속성 및 값을 할당하는 방법 2 function Child(props) { return ( ); }; 컴포넌트에서 props 매개변수 사용 예시 fun.. React Props Props 활용. 비슷한 페이지(등록,삭제)에서 글자하나만 바꾸기위해서 효율적으로 props를 사용할 수 있다. 아래는 더 효율적이게 수정해보았다. 공통부분 export import 공통부분은 따로 만들어서 재사용을 하는게 좋다. export const getDate = (value) => { const date = new Date(value) const yyyy = date.getFullYear() const mm = String(date.getMonth() + 1).padStart(2, "0") const dd = String(date.getDate()).padStart(2, "0") return `${yyyy}-${mm}-${dd}` } data에서 날짜부분을 편집하는 코드이다. import { getDate } from "../../../../commons/libraries/utils" utils폴더에 저장을 해서 getDate로 import 해주었다. getDate(el.c.. React Twittler SPA React SPA - 사용자가 웹사이트 내의 다른 페이지로 이동할때 브라우저 전체를 불어오지 않고 중복된 요소를 제외하고 불러온다. 장점. - 서버 입장에서는 요청받은 데이터만 넘겨주면 되기 때문에 과거와 같은 과부하 문제도 현저히 줄일 수 있다. - 화면 전체를 새로 렌더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다. 단점. - 브라우저는 첫 화면 로딩 시에 HTML 파일을 읽어들인 후 그 안의 script 요안에 있는 JavaScript 파일을 다시 받아오는 과정을 거친다. - JavaScript 파일이 무거워져 파일을 기다리는 시간으로 인해 첫 화면의 로딩 시간이 길어진다. - 검색 엔진 최적화가 좋지 않다.( 검색엔진 최적화: 구글이나 네이버 같은 검색엔진이 자료를 수집하기 좋도록 웹.. 이전 1 ··· 3 4 5 6 다음
