1. Props 컴포넌트의 속성(property)를 의미한다. 변하지 않는 외부로부터 전달받은 값이며 웹 애플리케이션에서 해당 컴포넌트가 가진 속성들의 객체이다. 1) 특징 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. props를 함수의 전달인자처럼 전달받아서 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다. 컴포넌트가 최초로 렌더링 될때 화면에 출력하려는 데이터를 담은 초기값으로도 사용할 수 있다. 객체 형태이며, 어떠한 타입의 값도 전달할 수 있다. 읽기 전용이다. 외부로부터 전달받는 변하지 않는 값이어야 함으로 함부로 변경되지 않도록 읽기 전용(read-only) 객체이다. 만약 읽기 전용 객체가 아닐경우 props가 의도치 않게 수정되면서 상위 컴포넌트들에 영..
전체 글
보호되어 있는 글입니다.
export default 해당 모듈(파일)에 개체(변수, 클래스, 함수 등)가 하나만 있다는 사실을 나타냄 => 해당 모듈의 전체 개체를 export 한다는 의미 export한 이름과 상관없이 임의의 이름으로 import가 가능함 중괄호 없이 모듈을 가져올 수 있음 export 복수의 개체가 있는 라이브러리 형태의 모듈에서 가져오기 할때 사용됨 => 특정 개체만 가져오기 가능 반드시 export한 이름으로만 import 할 수 있음 import 할때 중괄호로 가져와야 함
1. React SPA 1) MPA vs SPA MPA(Multiple Page Application) 페이지마다 새로운 html을 받아와 보여주는 양식이다. 누를때마다 깜빡이고 서버에서 html을 받아오는 시간이 소요된다. SPA(Single Page Application) 서버로부터 완전한 페이지를 불러오지 않고 페이지 갱신에 필요한 데이터만 받아 그 정보를 기준으로 현재의 페이지를 업데이트하여 사용자와 소통하는 웹 애플리케이션이나 사이트. 사용자가 다른 페이지로 이동할 때 MPA : html로 된 페이지 전체를 불러옴으로 페이지 전체가 새로 로딩되며 깜빡이게 된다. SPA : 메뉴나 푸터 등 페이지 전환 전후에 중복되는 부분은 제외하고 변경해야 하는 부분만 새로 불러오게 된다. 웹사이트가 복잡해지고..
useNavigate는 양식이 제출되거나 특정 이벤트가 발생할때 url을 조작할 수 있는 인터페이스를 제공한다. import { useNavigate } from 'react-router-dom'; function Func() { const navigate = useNavigate(); const onClickImg = () => { navigate("../success", {replace: (true or false) / state : (any)}); }; return ( ); } export default Func; useNavigate의 첫번째 인자는 주소를 받으며 두번째 인자로는 replace와 state 인수를 사용한다. replace (true or false) : true일 경우 naviga..
보호되어 있는 글입니다.
localStorage Web Storage의 방식중 하나로 사용자의 로컬 저장소에 키-값을 저장할 수 있다. 브라우저를 닫았다 열어도 데이터가 사라지지 않는다. 유효기간 없이 데이터를 저장한다. 도메인과 브라우저별로 저장된다. 값은 반드시 문자열로 저장된다. JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장데이터를 지워야만 삭제할 수 있다. window.localStorage에 접근하게 되면 Storage 객체의 인스턴스를 생성하게 되고, 이를 사용해 데이터 항목을 브라우저 내에 추가 또는 제거하거나 읽어올 수 있다. 데이터 추가하기 : setItem() window.localStorage.setItem(key, value) 💡 배열이나 객체를 저장해야할때 localStrorage에는 문자..
ISO 형식(ISO 8601 형식)은 날짜 및 시간 관련 데이터의 전 세계적인 교환 및 통신을 다루는 국제 표준이다. 이 표준은 숫자 날짜 및 시간 표기에 대해 서로 다른규칙을 사용하는 국가간에 데이터가 전송될때 데이터를 잘못 해석하지 않게 한다. 1. 날짜/시간을 ISO 형태로 변경할때 : .toISOString() const date = new Date(); // 새로운 Date 객체 반환 console.log(date.toISOString()); // 2023-01-22T05:05:24.783Z 2. ISO 형태의 날짜를 현지 시간에 맞게 변경할때 : .toLocaleString() const newDate = new Date('2023-01-22T05:16:26.418Z'); console.log..
App 컴포넌트 내부에 Sidebar 컴포넌트를 추가한다. span이나 i 태그에 className을 추가해 아이콘을 추가한다. Feature 컴포넌트 내부에 Counter 컴포넌트를 추가한다. Counter 컴포넌트 내부에 total 텍스트와 배열의 length를 구해 템플릿 리터럴로 작성한다. Features 컴포넌트 내부에 Footer 컴포넌트를 추가한다. Footer 컴포넌트에 리턴되는 요소들을 감싼 최상위요소 div를 footer 태그로 변경한다. img 태그를 추가하고 src에 tweet 객체에서 이미지 주소를 가져오는 값을 할당한다. span 태그를 추가하고 tweet 객체에서 유저 이름을 찾아 텍스트에 넣고 className으로 클래스를 지정한다. span 태그를 추가하고 tweet 객체에..
1. React 프론트엔드 개발을 위한 자바스크립트 오픈 소스 라이브러리. 📂 React의 특징 선언형(Declarative) 코드를 분석하지 않고도 의도를 이해할 수 있음. => 명시적인 코드 작성 한 페이지를 구현할때 html / css / js를 나눠서 작성하는 것이 아닌, JSX를 활용한 선언형 프로그래밍을 지향함 컴포넌트 기반(Component-Based) 컴포넌트(Component) : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어놓은 것 리액트는 기능 구현을 위해 컴포넌트를 기반으로 애플리케이션을 개발함 컴포넌트로 분리시, 각각의 컴포넌트가 독립적이고 재사용이 가능하다. => 각 기능 자체에 집중하여 개발 가능. 유지보수가 편해지고 컴포넌트간 의존성은 줄어듬. 범용성(Learn Once,..