useEffect useEffect : 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 클래스형의 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다. 예제 //Info.js import { useState, useEffect } from "react"; const Info = () => { const[name, setName] = useState(''); const[nickname, setNickname] = useState(''); useEffect(() => { console.log('렌더링이 완료되었습니다.'); console.log({ name, nickname }); }); const onChang..

자바 스크립트 배열의 map() 함수 자바 스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index값 array : 현재 처리하고 있는 원본 배열 thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 예제 //IterationSample.js const IterationSample = () ..

리액트의 이벤트 시스템 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷하다. 이벤트 사용 시 주의 사항 이벤트 이름 : 카멜 표기법으로 HTML에서는 onclick 으로 작성하지만 리액트에서는 카멜 표기법으로 onClick 으로 작성해야 한다. 이벤트에 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때 큰따옴표 안에 실행할 코드를 넣었지만, 리액트에서는 함수 형태의 객체를 전달한다. 화살표 함수 문법을 사용하거나 혹은 외부에 미리 함수를 만들어서 전달하기도 한다. DOM 요소에만 이벤트를 설정할 수 있다. -> 클릭할 때 doSomething함수를 실행하..

컴포넌트를 선언하는 방식 함수 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트 특징 render 함수가 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 함 tate 기능 및 라이프 사이클 기능을 사용할 수 있음 임의 메서드를 정의할 수 있음 함수 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편함 메모리 자원도 덜 사용 프로젝트를 완성하여 빌드한 후 배포할 때, 결과물의 파일 크기가 더 작음 함수 컴포넌트 단점 state와 라이프사이클 API 사용 불가능 -> Hooks 기능이 도입되면서 해결 Props Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소 props 값 : 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있음 컴포넌트를 사용할 때 p..

코드 이해하기 VScode > 파일 > 열기 (리액트 폴더 열기) → Src/App.js 열기 Import 구문 : 특정 파일을 불러오는 것 import logo from './logo.svg'; import './App.css'; function 키워드를 통해서 컴포넌트를 만듦 → 함수 컴포넌트 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 나타냄 함수에 반환하는 내용을 보면 HTML 같지만 JSX라는 코드이다. //hello-react/src/App.js function App() { return ( Edit src/App.js and save to reload. Learn React ); } JSX란? JSX는 자바 스크립트의 확장 문법, XML과 유사하게 생김. function ..

리액트 : 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만 신경쓰는 라이브러리 컴포넌트 : 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체 : 재사용이 가능한 API로 수많은 기능들을 내장 : 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링 : 사용자 화면에 뷰를 보여 주는 것 리액트 특징 - Visual DOM 1. DOM이란? Document Object Model의 약어 (= 객체로 문서 구조를 표현하는 방법, XML, HTML로 작성) DOM의 문제점 : 동적 UI에 최적화 되어있지 X → 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈 발생. 해결방법 : DOM을 최소한으로 조작하여 작업을 처리 → Virtual DOM 2..

리액트 사용 이유 인스타그램 등 요즘 웹들을 보면 모바일 App 처럼 부드럽게 동작하는 웹들이 많다. 메이저 SNS들도 새로고침 없이 웹 탐색이 가능하다. 이런 사이트들은 모바일 앱과 비슷한 사용감을 가져서 Web -App이라고 부른다. 이런 Web-App을 쉽게 만들 수 있는 것이 React이다. 장점 모바일 앱으로 발행이 쉽다. 앱처럼 뛰어난 UX 그냥 웹사이트보다 비즈니스적 강점이 있다. 리액트 설치와 셋팅법 Node.js 검색 후 최신버전 설치하기 Visual Studio Code 설치하기 작업 폴더 생성 -> 에디터에서 Open Folder 눌러서 작업 폴더 오픈 리액트 프로젝트 생성 : 터미널에서 "npx create-react-app 이름" 입력 npx : 라이브러리 설치를 도와주는 명령어(..