091

1. SPA- SPA(Single Page Application)란 하나의 HTML 페이지에서 필요한 데이터만 가져오는 형태로, URL 별로 여러개의 html 파일로 구성되며 새롭게 로드되는 MPA(Multi Page Application)와 반대되는 개념입니다. SSR, CSR, SPA1. SSR(Server Side Rendering)&CSR(Client Side Rendering)+SPA - SSR은 브라우저가 특정 URL을 요청하면 서버가 데이터베이스를 조회하여 완성된 형태의 HTML문서를 동적으로 생성한 후 클라이언트에 응답하는 전in-ouput91.tistory.com-> SPA는 웹 애플리케이션에서 단일 HTML 페이지로 동작하는 애플리케이션 구조로, 페이지를 이동할 때 새로운 HTML 파일..

1. 리스트와 키 - 리스트(List)란 같은 종류의 아이템을 순서대로 모아 놓은 것으로, 자바스크립트에서는 배열로 표현합니다.const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map(number => {number});-> Array.map()을 사용할 때 key 없이 사용하면 위처럼 "Each child in a list should have a unique key prop"라는 경고가 뜹니다. 렌더링은 되지만 성능 최적화가 안된다는 의미입니다. - 키(key)가 필요한 이유는 React는 Virtual DOM 비교 시 리스트 아이템이 변경/추가/삭제되었는지 파악해야합니다. key가 없으면 React는 전체 리스트를 다시 렌더링 하고, key가 ..

1. 이벤트 핸들링(Event Handling) - 이벤트(Event)란 브라우저에서 사용자의 조작이나 환경 변화로 발생하는 사건을 의미합니다. function handleClick() { //일반함수형식 setIsToggleOn((isToggleOn) => !isToggleOn);}const handleClick2 = () => { //화살표함수형식 setIsToggleOn((isToggleOn) => !isToggleOn);} {isToggleOn ? 'On' : 'Off'}->리액트에서는 함수를 그대로 중괄호에 감싸서 사용합니다. 이전 설명 글에서 언급했듯이 인자가 없는 경우에는 함수만 넘겨도 되지만 인자가 있는 경우에는 {()=>함수명(인자)}로 넘겨줘야합니다. 그렇지 않으면 뒤에 함수명(인..

5. Lifecycle(생명주기) & Hook(훅)- 생명주기(Lifecycle)이란 리액트 컴포넌트가 생성되고 사라지는 전 과정을 의미합니다. - 훅(Hook)은 함수 컴포넌트에서 React State와 생명주기 기능을 연동할 수 있게 해주는 함수입니다.-> 훅의 이름은 모두 use로 시작해야하며, 원하는 시점에 함수가 실행되도록 만드는 함수가 훅입니다.const [변수명, set함수명] = useState(초기값);const [count, setCount] = useState(0);• useState(상태관리): 컴포넌트 내에서 변하는 데이터를 관리할 때 사용 -> 상태가 업데이트되면 리액트는 해당 컴포넌트를 다시 렌더링하여 화면에 갱신하며, set 함수가 비동기적으로 동작합니다. useEffect(..

3. Component-based 실습- 컴포넌트를 하나로 합쳐 만드는 컴포넌트 합성과 큰 컴포넌트에서 일부를 추출해 새로운 컴포넌트를 만드는 추출의 과정을 통해 재사용성을 극대화한 애플리케이션을 만들 수 있습니다. 실습을 2가지 정도 보여드릴 것인데 전부 데이터 속성값을 더미 데이터로 하드코딩으로 하였습니다.(1)댓글import imgUserIcon from "../assets/user_icon.png"const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16..

2. Component&React Element(1) 컴포넌트(Component)란 UI를 반환하는 함수이고 props를 받아 엘리먼트 트리를 동적으로 생성해 내는 팩토리 함수로, 일반 함수와 거의 같고 2개의 추가적인 규칙이 추가된 형태입니다.import React from "react";function Book(props){ return ( {`이 책의 이름은 ${props.name}입니다.`} {`이 책은 총 ${props.numberOfPage}페이지로 이루어져 있습니다.`} // - JSX expressions must have one parent element. )}export default Book;i..

1. JSX- JSX란 JavaScript와 HTML/XML을 한 파일에서 쓸 수 있도록 한 React 전용 확장 문법입니다. JSX를 사용하면 createElement(...)와 같은 복잡한 방법 대신 HTML과 비슷하게 생긴 문법을 사용할 수 있어 훨씬 사용하기 수월합니다.-> React 17버전 이상에서는 더이상 내부 트랜스파일러가 React.creeateElement(...)를 사용하지 않고 리액트 엔진 내부에 있는 jsx-runtime을 자동으로 불러와 변환합니다. 아래 블로그를 통해 관련된 자세한 내용을 얻을 수 있습니다.https://so-so.dev/react/import-react-from-react/ 그 많던 import React from ‘react’는 어디로 갔을까이 글에서는 Re..

(4) 분할대입- 분할 대입이란 객체나 배열에 있는 값들을 한번에 대입하기 위한 방식입니다. • 배열 분할대입: 키값이 없기 때문에 순서대로 대입됩니다.const arr = [10,20,30];console.log(arr[0],arr[1],arr[2]); //10 20 30const [a,b] = arr; //가장 기본적인 배열 분할대입console.log(a,b); //10 20const [first,,third] = arr; //중간 요소 건너뛰기console.log(first,third); //10 30const [head,...rest] = arr;console.log(head,rest); //10 [ 20, 30 ]• 객체 분할대입: 객체의 프로퍼티를 꺼내서 변수로 만드는 과정으로, 지정된 키값..