본문 바로가기

react

(29)

React / map, filter로 반복 렌더링하기 map과 filter map과 filter는 둘다 배열을 다룰 때 자주 사용하는 메서드다. map() : 배열 내의 모든 요소 각각에 대해 주어진 콜백을 호출한 결과를 모아 새로운 배열을 반환filter() : 배열의 각각의 요소에 대해 콜백을 호출한 결과, true를 반환하는 (조건을 만족하는) 모든 요소를 모아 새로운 배열을 반환둘다 원본 배열은 변경하지 않는다. 예시로 일단 다음과 같이 트와이스의 멤버들의 정보가 담겨있는 배열을 하나 만들었다.const twice = [ { name: "나연", birth: 1995, country: "한국" }, { name: "정연", birth: 1996, country: "한국" }, { name: "모모", birth: 1996, country: "일..

React / JSX 문법 JSX(JavaScript XML)React에서 사용되는 Javascript의 확장 문법으로, HTML과 유사한 형태로 Javascript 코드가 작성이 가능하다.무조건 jsx를 쓸 필요는 없지만, 간결하게 작성할 수 있기 때문에 많이 사용된다. 규칙return문 안에 HTML 형태로 작성두 줄 이상 작성할 경우 소괄호로 묶어야 함하나의 최상위 요소로 묶어줘야 함내부적으로는 Javascript 객체로 변환되기 때문에, 하나의 배열로 감싸지 않은 함수에서는 두 개의 객체를 반환할 수 없기 때문에 나 (Fragment : 브라우저상 html 트리 구조에서 흔적 없이 그룹화)로라도 감싸줘야 한다.중괄호를 사용해 Javascript 코드를 작성함 // JSX 문법 사용function App() { return..

React / 컴포넌트 CDD(Component Driven Development) 컴포넌트 기반 개발화면을 독립적이고 재사용 가능한 컴포넌트로 구성하여 개발하는 방법론Class 컴포넌트, 함수형 컴포넌트(많이 권장) 두 종류가 있음 Class 컴포넌트 클래스 문법 ⬇️더보기더보기클래스(Class)는 객체를 생성하는 템플릿 역할로, 붕어빵 틀에 많이 비유되고 있다... (객체 - 붕어빵, 클래스 - 붕어빵 틀) 1) 기본 구조class Person { constructor(name, age) { // 생성자 (객체가 생성될 때 실행됨) this.name = name; this.age = age; } sayHello() { // 메서드 (객체가 사용할 함수) console.log(`안녕하세요! 저는 ${th..

React / 프로젝트 생성 React 프로젝트 생성 방법 CRAVite (권장)모듈 번들러로 Webpack 사용모듈 번들러로 Rollup 사용개발 환경에서도 번들링 진행 O개발 환경에서는 번들링 진행 X서버 시작과 리로딩 시간 느림 (코드를 수정할때마다 번들링 진행)서버 시작과 리로딩 시간 빠름Webpack의 다양한 기능 이용 가능빠른 개발 속도에 유리모듈도 같이 설치(node_modules)모듈은 따로 설치해야 됨npx create-react-app npm create vite@latest * 번들링 : 배포하기 위해 여러 코드와 파일을 한번에 묶어주는 과정 * CRA가 이제 추천되지 않는 이유느린 개발 속도 → Webpack 기반이라 빌드와 HMR 속도가 느려 코드 변경 반영이 늦음.번들 크기 큼 → 기본 설정이 최적화 부족,..

React / Node.js, npm, npx 설치 및 기본 사용법 (Mac) React자바스크립트 UI 라이브러리로 다음과 같은 특징들을 가지고 있다.가상 DOM을 통해 효율적으로 렌더링이 가능컴포넌트 기반의 재사용 가능한 UI를 가짐단방향 데이터 바인딩JSX 문법으로 직관적인 UI 작성SPA(Single Page Application) 개발 지원 React를 사용하는 이유1. 코드 일관성이 높음vanila Javascript (순수 Javascript)는 코드에 정해진 규격(변수 선언, 네이밍, 함수 선언 등)이 없기 때문에 일관성이 떨어져 서로의 코드에 적응하기 어려울 수 있다. 하지만 리액트에서는 컴포넌트 구조, 네이밍 규칙, 파일 구조, 상태 관리 방식 등 일관된 규칙을 적용할 수 있기 때문에 가독성, 유지보수성을 향상시킬 수 있다. 2. SPA 프레임워크리액트는 SPA..

이전 1 2 3 4 다음

티스토리툴바