React (3) 썸네일형 리스트형 [React] Hooks 정리 [ hook ] (변수) setter, getter 만들어놓은 변수 외부에서는 접근할 수 없는 const 변수 useState const [state, setState] = useState('클릭 전'); React에서 사용자의 반응에 따라 화면을 바꿔주기 위해 사용되는 트리거역할을 하는 변수. 초기화는 숫자, 문자, 배열 모두 가능하다. useEffect useEffect(() => { console.log("Test"); }, []); component가 화면에 가장 처음 rendering 될때 한번만 실행하고 싶을 때 빈 배열을 추가한다. 배열을 넣지 않으면 rendering 될 때마다 실행된다. useContext useMemo [React] 기초, Component function HelloReact(){ return 안녕? 리액트! } function App() { return ( ); } export default App; 함수 형식의 element를 사용할 수 있다. import React from "react"; function App() { // 소스부 const name = "홍길동"; var age = 24; let address = "서울시"; const element = {name} {age} // class == className return ( Hello React {name} {age} {address} {element} test title ); } export default App; in-line 방식의 style을 적용할 때 속성 하나에 대.. [React] 환경설정 React (반응형) Single View. View는 하나이고 View 이동 하지 않는다. 하나의 view를 Component 로 구성. 생성 과정 1. VSCODE 실행 2. Terminal(터미널) > new Terminal(새 터미널) 3. 프로젝트들을 저장할 폴더로 이동 npx create-react-app begin-react 4. React 프로젝트 생성 begin-react 는 프로젝트명 5. 해당 프로젝트 폴더로 이동 후 npm 명령어 적용 프로젝트 실행시키는 npm 명령어 프로젝트 구조 node_modules : jar 파일처럼 설정파일들이 들어있는 폴더 이전 1 다음