Frontend (96) 썸네일형 리스트형 리액트 배열 내장 함수 : map() map() 전달된 인자를 사용하여 각 배열의 요소를 돌면서 작업 처리 -> 처리된 결과를 새로운 배열에 담아 반환하는 함수 간단 사용법 예제 // [1] const numbers = [1, 2, 3, 4, 5]; // 배열 객체 선언 const result = numbers.map((num) => num *2); // map() 함수가 배열의 각 요소 값에 2배 한 결과 return // [2] const menus = ["menu1", "menu2", "menu3", "menu4"] // 배열 객체 선언 const menuList = menus.map((menu) => ({menu})); // map() 함수가 배열의 각 요소 값을 가지는 return return( {menuList} ) // [3] .. 리덕스 개념 리덕스를 쓰면 상태 관리를 컴포넌트 바깥에서 한다. 리덕스를 사용하면 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 컴포넌트의 바깥에서 관리할 수 있게 됨 [스토어] 프로젝트 상태에 관한 데이터들이 담겨있음 [subscribe(listener)] 컴포넌트는 스토어에 구독 -> 특정 함수가 스토어한테 전달됨 -> 스토어의 상태값에 변동이 생길 때마다, 전달받았던 함수(listener 함수) 호출 [dispatch(action)] (액션이 디스패치 된다 = 액션이 발생된다 = 액션을 발생시키는 역할 = 트리거 역할) dispatch(action) : 액션 객체를 파라미터로 넣어서 호출 디스패치 함수 호출 -> 리듀서에게 현재 상태와 액션 전달 -> 스토어가 리듀서 함수 실행시켜 새로운 상태 만듦 ( = 액.. 라우팅 (Routing) 라우팅 (Routing) 다른 URL 주소에 따라 다른 화면을 부여해 주는 것 (페이지 이동) 기존의 이동 방법 ( 태그) : 완전히 새로운 페이지로 이동 (상태 정보 잃음) SPA : 현재 페이지에 삽입 해서 보여 줌 (상태 정보 유지) 리액트 라이브러리 자체에는 라우팅 기능이 내장되어 있지 않음 -> 라우터 라이브러리 설치해서 쉽게 구현 가능 Link 컴포넌트 태그의 속성인 페이지 새로고침 막아줌 태그의 이동 방법 : 페이지를 전환하는 과정에서 완전히 새로운 페이지를 불러와 이동하기 때문에 애플리케이션이 갖고 있던 상태 정보를 모두 잃음 리액터 라우터를 사용할 때는 태그 사용하지 않고, (완전 새로운 페이지로 이동하고자 할 때는 사용하기도 함) Link 컴포넌트를 사용하여 다른 주소로 이동 ( 태그 .. MPA(Multiple Page Application) & SPA (Single Page Application) MPA(Multiple Page Application) 기존 웹페이지 작동 원리 사용자가 다른 페이지로 이동(태그 사용)할 때마다 새로운 HTML을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스 전달 받아 해석한 뒤 화면에 출력 사용자에게 보이는 화면을 서버에서 준비하여 전달 웹 출력 내용이 많은 경우 새로운 화면을 보여 줄 때마다 서버 측에서 모든 뷰를 준비 -> 성능상의 문제 사용하고 있는 상태 유지하는 작업이 번거로움 변경되지 않은 부분까지 새로 불러와야 하므로 불필요한 로딩이 있어 비효율적 캐싱과 압축 기능으로 서비스 최적화 가능 사용자와의 인터렉션이 자주 발생하는 모던 웹 애플리케이션에는 부적당 SPA (Single Page Application) 리액트 등과 같은 라이브러리 또는 프레임워크.. 이벤트 처리 시 주의점 이벤트 처리 시 주의점 이벤트 이름은 카멜 표기법 사용 onClick, OnKeyUp, onChange 이벤트에 이벤트 핸들러 함수 형태의 값 전달 onClick = {onClickEnter} onClick = {() => setColor(‘green’)} DOM 요소에만 이벤트 설정 가능 사용자가 직접 만든 컴포넌트에는 이벤트 직접 설정 불가 onClick을 props로 전달해서 컴포넌트 내부의 DOM 이벤트로 설정 가능 예 : MyComponent에 onClick 설정 시 했을 때 클릭 시 eventHandler() 함수를 실행하는 것이 아니라 이름이 onClick인 props를 MyComponent에 전달하는 것 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정 가능 onChange 이벤트.. 이미지를 출력하는 두 가지 방법 방법1 : import 하는 법 src 안에 images 폴더 생성 / 이미지 저장 이미지를 사용하는 컴포넌트에서 이미지 import 하여 사용 import imgApple from '../images/apple.png'; // 이미지 출력 방법2 : public 내에 assets 폴더 만들고 그 안에 이미지 파일 저장 // import 필요 없이 바로 이미지 출력 가능 import React, { Component } from 'react'; import imgApple from '../images/apple.png'; import imgBanana from '../images/banana.png'; import imgLizard from '../images/lizard.png'; import imgL.. state state 컴포넌트에서 내부에서 변경될 수 있는 값 변수 대신 data를 저장할 수 있는 또 다른 방법/저장공간 값을 변경할 때는 반드시 setState() 함수(메소드) 사용해서 변경 const로 선언되었더라도 setState() 사용하면 값 변경 가능함 setState() 함수 사용하지 않고 직접 변경하면 재 렌더링 되지 않음 state 사용 이유 웹이 App처럼 동작하게 하고 싶어서 -> state로 저장된 변수가 변경되면 HTML 자동 렌더링 됨 일반 변수는 그 값이 변경되어도, 새로고침 하지 않는 이상 자동 재 렌더링 되지 않음 => 웹앱처럼 동작하게 하려면 자주 바뀌는, 중요한 data는 변수가 아닌 state에 저장해 사용 state 선언 state = { number:0 } state 사용.. 배열 비구조화 할당 배열 비구조화 할당 : 배열의 요소 값을 쉽게 추출하기 위한 문법 기존 방법 const array = [1, 2]; const one = array[0]; const two = array[1]; 배열 비구조화 할당 방법 const array = [1, 2]; const [one, two] = array; b와 strong, i와 em의 차이는 무엇인가요? 표면적으로는 동일하지만 스크린 리더 등에서 차이 발생 strong, em 사용 권장 이전 1 2 3 4 ··· 11 다음