Web Tech/react (21) 썸네일형 리스트형 React 기본 - 20. Immer 를 사용한 더 쉬운 불변성 관리 리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정이 아닌 하단에 코드처럼 불변성을 지켜주면서 업데이트를 해야합니다. 배열도 마찬가지로 push, splice 처럼 직접 수정이 아닌 concat, filter, map 등의 함수를 사용해야 합니다. 데이터의 구조가 까다로워지면 불변성을 지켜가면서 새로운 데이터를 생성해내는 코드가 복합해지므로, Immer 라는 라이브러리를 사용하면 다음과 같이 구현을 할 수 있습니다. // ... 연산자 사용하여 값 가져오기 const object = { a: 1, b: 2 }; const nextObject = { ...object, b: 3 }; Immer사용법 React 기본 - 7.useState(click event) useState 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 리액트에 useState라는 함수를 사용해 컴포넌트에서 상태를 관리할 수 있습니다. Counter.js // 리액트 패키지에서 useState 함수 불러오기 import React, {useState} from 'react'; function Counter() { // 배열 비구조화 할당을 통해 각 원소를 추출 // 새로운 sate 변수를 선언하고, number라 부름 // 함수를 호출하면 배열이 반환되며, 첫번째 원소는 값, 두번째 원소는 setNumber라는 이름의 함수 const [number, setNumber] = useState(0); const onIncrease = () => { // + 값 설정 setNumber(nu.. React 기본 - 6.조건부 렌더링 조건부 렌더링 특정 조건에 따라 다른 결과물을 렌더링 한는 것을 의미합니다. 보통 처리할때 기본적으로 삼항연산자를 사용합니다. JSX dptj null, false, undefined 렌더링하면 아무것도 나타나지 않음. App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, active 라는 props를 설정을 가정 App.js import React from 'react'; import Hello from './Hello'; import Inner from "./Inner"; function App() { return ( // 자바스크립트의 값이기 때문에 true 중괄호 감싸기 ); } export default App; Hello.js import React from 'react'; function .. React 기본 - 5.props props 어떠한 값을 컴포넌트에게 전달해줄때 사용, 객체 형태 기본 사용법 App 컴포넌트에서 Hello 컴포넌트를 사용할 때 name 이라는 값을 전달하는 경우 App.js import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; Hello.js import React from 'react'; function Hello(props) { return ( // 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회가 가능 // 만약 name 값을 조회하고 싶다면 props.name 을 조회하기 Hello, {props.name} ) } export default Hell.. React 기본 - 4.JSX JSX javascript 확장한 문법이며, UI를 구성하기 위해 react와 함께 사용할 것을 권장합니다. react는 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 포함하여 컴포넌트 형식으로 사용합니다. const el = Hello, React! JSX 를 javascript 제대로 변환하기 위한 규칙 1. 닫혀야 하는 태그 태그와 태그 사이에 내용이 들어가지 않을 때에는, Self Closing(열리고, 바로 닫시는 태그) 태그 라는 것을 사용해야합니다. import React from 'react'; import Hello from './Hello'; function App() { return ( ); } export default App; 2. 반환값 바로 최상단에 감싸져야 하는 .. React 기본 - 3.컴포넌트 컴포넌트 리액트는 컴포넌트 개발형식이며, 컴포넌트는 UI 조각이며 쉽게 재사용이 가능합니다. 컴포넌트는 여러개 만들 수 있지만, 리액트는 한 번에 하나의 컴포넌트만 렌더링 할 수 있습니다. Hello.js // 컴포넌트 생성 // 리액트 컴포넌트 만들 땐 최상단에 하단 처럼 리액트를 불러와야 인식 import React from 'react'; // 만들 컴포넌트 함수형 function Hello() { return hello, react! } // 컴포넌트 내보내기 // 다른 곳에서 Hello 컴포넌트를 불러올 수 있음 export default Hello; App.js import React from 'react'; // 최상단에 불러올 컴포넌트 가져오기 improt Hello from './Hell.. React 기본 - 2.리액트 환경설정 및 시작하기 React는 CLI로 실행하는 프로그래밍 언어이므로 필요한 개발환경을 설치하고 세팅을 해야합니다. 1. Node.js 설치 Node.js는 확장성 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼입니다. 1-1. 하단 링크를 통해 들어가 자신의 컴퓨터 환경에 맞는 프로그램을 다운받으세요. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2-1. cmd에서 yarn을 설치합니다. yarn은 자바스크립트 패키지 매니저 중 하나이며, Yarn 을 사용하는 이유는, 더 나은 속도, 더 나은 캐싱 시스템을 사용하기 때문입니다. $ nvm insta.. React 기본 - 1.리액트란? React란? 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 사용합니다. facebook에서 제공하는 라이브러리이며, 현재 많이 활용되고 있는 인기있는 라이브러리 입니다. React의 특징 1. Data flow 2. Component 기반의 구조 3. Virtual Dom 4. Props & State 5. JSX React의 특징-1. Data flow 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가지며, 데이터 바인딩 규모가 커지면 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있습니다. React의 특징-2. Component 기반의 구조 UI를 여러 컴포넌트를 쪼개서 만들어 한 페이지 내에서도 여러 부분의 독립된 컴포넌트를 만들어서, 재사용을 해 유지.. 이전 1 2 3 다음
