React (9) 썸네일형 리스트형 9. import React from "react" 이게 뭘까 ? 처음 리엑트를 설치할 때 app.jsx 에는 import React from "react" 가 붙는다. 그런데 이걸 삭제를 해도 작동이 잘된다 ! 그렇다면 왜 쓰는걸까? 왜 있는걸까 ? 브라우저는 HTML, CSS, JavaScript 만 읽을 수 있기 때문에 React 문법을 이해하지 못한다. JSX 문법을 JavaScript 로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드로 변환시킨다. 이 때, 객체인 React를 가져오기 위해서 import React from "react" 를 맨 위에 작성해 React를 불러오게 되면 객체 React를 통해 React 메소드를 작성할 수 있게 된다. 그리고 난 후 Babel 을 통해 React를 유효한 Java.. 8. useState, useRef, useContext, useReducer useState 단순한 하나의 상태를 관리하기에 적합. const [ state, setState ] = useState( initState | initFn ) state가 바뀌면, state를 사용하는 컴포넌트를 리렌더함 useEffect와 함꼐, state에 반응하는 훅을 구축 useRef 상태가 바뀌어도 리렌더링하지 않는 상태를 정의함 즉, 상태가 UI의 변경과 관계없을 때 사용 ex) setTimeout의 timerId 저장 uncontrolled componenet의 상태를 조작하는 등, 리렌더링을 최소화하는 상태 관리에 사용됨. useContext 컴포넌트와 컴포넌트 간 상태를 공유할 때 사용 부분적인 컴포넌트들의 상태관리, 전체 앱의 상태 관리를 모두 구현 Context Provider 안에.. * SPA, MPA, CSR, SSR Single Page Application SPA 는 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식 CSR(Client Side Rendering) 방식으로 렌더링한다. 단 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩한다. 그 후에는 데이터를 받아올 때만 서버와 통신한다. 즉, 첫 요청 시 딱 한페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여준다. 이를 클라이언트 관점에서 말하자면 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신하는 것이다. 필요한 부분만 갱신하기 때문에 네이티브 앱에 가까운 자연스러운 페이지 이동과 사용자 경험(UX)을 제공할 수 있다. Angular, React, Vue 등 프론트엔드 기술.. 6. Hooks 💨 Hook 이란? 컴포넌트에서 데이터를 관리(State) 하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다. useState 가 바로 State Hook 이다. ✅ 유의사항 constr App = () => { const [ username, setUsername ] = useState(''); return ( {username}님 환영합니다. ) } Hook 은 React 함수(컴포넌트, Hook) 내에서만 사용이 가능하다. Hook의 이름은 반드시 'use' 로 시작한다. 💨 State Hook const App = () => { // 일반적인 useState 사용법 const [ state이름, setState이름 ] = useState(초기값); } - useState 는 컴.. 5. 이벤트 처리 💨 이벤트 처리(헨들링) 방법 1) 헨들링 함수 선언 const App = () => { const handleClick = () => { alert("클릭"); } return ( 클릭! ); }; 2) 익명 함수로 처리 const App = () => { return ( { alert('클릭')} }>클릭! ) } 💨 이벤트 객체 const App = () => { const handleChange = (event) => { console.log(event.target.value + "라고 입력하셨네요."); } return ( ); }; - DOM Element 의 경우 핸들링 함수에 이벤트 object를 매개변수로 전달한다. - 이벤트 object 를 이용하여 이벤트 발생 원인, 이벤트가 일어난 .. 4. State 💨 State 란? 문법 const App = () => { const [value, setValue] = useState(초기값); return ... } import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( 버튼을 {count}번 눌렀습니다. setCount(count + 1)}> 클릭 ); } State 는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다. State 값이 변경되고 재렌더링이 필요한 경우 React 가 자동으로 계산하여 변경된 부분을 .. 3. Props 💨 Props 란 ? * 컴포넌트 생성 const Welcome = (props) => { return Hello, {props.name}; } * 컴포넌트 사용 const App = () => { return ; } 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavasScript의 요소라면 제한이 없다. 주로 Component의 '재사용' 을 위하여 사용합니다. 💨 Props 는 읽기 전용이다. 🥶 DON'T const Welcome = (props) => { props.name = props.name + "님"; return Hello, {props.name}; } Props 의 값을 임의로 변경해서 사용하면 안된다. 😁 DO .. 2. Component 💨 Function Component const MyComponent = ({ childern }) => { return {childern} ; } // 컴포넌트 작성 const App = () => { return ( 안녕 반가워 바이바이 ); } // 컴포넌트 사용 위의 코드에선 Function Component 가 사용되었다. Class Component 또한 사용할 수 있지만, v16 부터 새로운 Function Component 와 Hooks 개념이 발표되었으며, 현재는 Function Component 가 주로 사용되고 있다. 💨 Component의 특징 안녕하세요. 컴포넌트에 Attribute에 해당하는 부분을 Props(Properties) 라고 한다. 컴포넌트 안에 작성된 하위 Eleme.. 이전 1 2 다음
