react (4) 썸네일형 리스트형 [React] State State의 특징 살면서 변할 수 있는 값 컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 useState 사용하기 React에서 state를 사용하기 위해서는 useState라는 함수를 사용하며, React로부터 불러와야 한다. import { useState } from "react"; 이후 컴포넌트 안에서 useState를 호출해야 한다. useState를 호출하면 배열을 반환하며, 배열의 0번째 요소는 현재 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다. useState의 인자로 넘겨주는 값은 state의 초기값이다. const [state 저장 변수, state 갱신 함수] = useState(state 초기 값); useState의 변수명은 아무 이름으로 지어도.. [React] Props Props의 특징 컴포넌트의 속성을 의미한다. 부모 컴포넌트로부터 전달받은 값이다. (단방향 데이터 흐름을 갖는다.) 객체형태이다. 읽기 전용이다. (props는 수정할 수 없다.) props를 사용하는 방법 하위 컴포넌트에 전달하고자 하는 값과 속성을 정의한다. props를 이용하여 정의된 값과 속성을 전달한다. 전달받은 props를 렌더링한다. function Parent() { return ( Parent Title {/* 하위 컴포넌트에 전달하고자 하는 값("Child Title")과 속성(text) 정의 */} ); }; {/* props를 이용하여 정의된 값("Child Title")과 속성(text) 전달 */} function Child(props) { return ( {/* 전달받은 pr.. [React] SPA React SPA(single page application)는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라 현재 페이지에서 다른 부분들만 서버로부터 전달받아서 업데이트를 하는 방식이다. 장점 빠르게 반응한다. 과부하 문제를 현저하게 줄일 수 있다. 좋은 사용자 경험을 제공한다. 단점 JavaScript 파일이 무거워져서 첫 화면 로딩이 느리다. 검색 엔진 최적화가 안 좋다.(검색 엔진의 발전으로 단점이 보완되고 있다.) [React] React의 특징 React는 JavaScript 오픈 소스 라이브러리이다. React의 3가지 특징 선언형 컴포넌트 기반 범용성 선언형 하나의 파일에 명시적으로 작성할 수 있는 JSX를 활용한 선언형 프로그래밍을 지향한다. 컴포넌트 기반 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트 기반으로 개발을 한다. 컴포넌트는 서로 독립적이고 재사용이 가능하기 때문에 기능 자체에 집중하여 개발할 수 있다. 범용성 JavaScript의 오픈 소스 라이브러리로 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다. 이전 1 다음