Frontend/React (15) 썸네일형 리스트형 props props 컴포넌트의 속성 (값 설정) 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용 (읽기 전용) (단방향) 컴포넌트 렌더링할 때 값을 전달해 주고 싶을 때 사용 부모 컴포넌트 (설정) : App 자식 컴포넌트 (사용) : Subject {this.props.title} {this.props.sub} 디폴트 props 기본값으로 디폴트 props 설정 : 자식 컴포넌트에 설정 방법1 : 상단에 static으로 설정 (더 최신 방법) static defaultProps = { date: '2021-12-17' } 방법2 : 하단에 클래스.defaultProps = { } 설정 Subject.defaultProps = { year: 2021 } 주의 : 2개 다 설정한 경우 나중에 아래 설정한 것.. JSX 문법 JSX 문법 조건 && expression 조건이 true이면 expression 반환 조건이 false이면 expression 반환하지 않고 무시 (아무것도 출력되지 않음) 조건 || expression 조건이 0 또는 false이면 expression 반환 0이 아니면 해당 값 출력 const number = 100; { number || '내용...'} // 결과 : 100 출력 인라인 스타일링 : 카멜 표기법 CSS 속성명에 ‘-’ 사용 못하고 카멜 표기법(CamelCase) 사용 ex) backgroud-color 안 되고 backgroundColor 로 해야 함 태그는 반드시 닫아야 함 ex ) 주석 필요한 곳에서 Ctrl + / 입력하면 영역에 맞는 주석이 삽입됨 JSX 주석 : {/* 조건.. 컴포넌트 유형 : 클래스 기반 / 함수 기반 컴포넌트 클래스 기반 컴포넌트 함수 기반 컴포넌트 단순히 props만 받아와서 보여주는 경우 초기 마운트 속도가 미세하게 빠르고, 불필요한 기능도 없어서 메모리 자원 덜 사용 단순히 값만 받아와서 보여줄 때 유용 컴포넌트 수가 엄청 많을 때 효과적 (수행 속도가 최적화될 수 있음 컴포넌트 수가 많지 않을 경우에는 클래스로 만들어도 성능상 큰 차이 없음 즉, 읽기 전용의 데이터를 받아와서 컴포넌트를 간단하고 빠르게 생성할 때 주로 사용 현재 함수 기반으로 되어 있는 컴포넌트를 클래스 기반 컴포넌트로 변경 App.js에 컴포넌트 3개 추가해서 결과 보고 3개의 각 컴포넌트를 js 파일로 분리 (분리하는 이유) - 컴포넌트가 하나의파일에 많아지면 복잡 - 컴포넌트마다 js 파일로 분리해서 생성 - 분리된 컴포넌트를 사.. npm과 npx npm 프로그램을 설치하는 프로그램 전역 설치 npx 전역 설치 대신 패키지를 실행하도록 npm에서 사용하는 패키지 러너 create-react-app이라는 프로그램을 임시로 한 번 실행 시키고 지운다는 개념 장점 컴퓨터 공간을 낭비하지 않고, 설치 실행때마다 새로 다운로드 하기 때문에 항상 최신 상태 (최신 버전의 React 사용) 설치 시 패키지가 너무 많이 설치되는 것을 방지 Webpack과 Babel Webpack 모듈 번들러 (Module Bundler) 모듈화된 코드를 하나의 파일로 합치고(번들링) 코들 수행할 때마다 웹 브라우저로 리로딩 코딩할 때 편의를 위해 여러 개의 모듈로 나누어 작업 그렇지만 브라우저에서 파일 단위 모듈 시스템을 이용하게 되면 많은 네트워크 비용 낭비됨 웹 애플리케이션의 규모가 커지면서 많은 양의 파일들이 하나로 모여 구성되는데 여러 개의 모듈을 하나의 파일로 묶어서 보낼 모듈 번들러 필요 리액트에서 웹팩(Webpack)이라는 모듈 번들러 사용 파일들의 관계가 복잡하고 무겁기 때문에 브라우저에서 이해하고 처리하기 힘들어 지는 문제 해결 파일들 간의 의존성 관계 정리 및 최적화, JSX 파일을 합쳐서 하나의 자바스크립트 파일로 만들어줌 Babel 자바스크립트 변환 도구 Ba.. React (리액트)란? React UI를 집중적으로 잘 만들기 위해서 페이스북(메타)에서 만든 자바스크립트 라이브러리 컴포넌트에 집중되어 있는 라이브러리 Angular와 달리 뷰만 신경쓰고 나머지는 써드파티 라이브러리를 필요 공식 라이브러리 개념 없고, 여러 가지 솔루션 사용 생태계 넓고 활성화되어 있음 React 사용 기업 많음 컴포넌트 (Component) 동작 가능한 하나의 부품 개념 애플리케이션의 화면을 구성하는 뷰(View)를 생성하고 관리 여러 컴포넌트를 조립하여 하나의 완성된 애플리케이션 생성 잘게 나누어진 컴포넌트 모듈들을 조합해서 애플리케이션을 개발하는 오늘날의 개발 접근 방법 (Web Modularity / 컴포넌트 기반 개발) - React가 보편화 시킴 React 특징 제일 먼저 가상 돔을 성공적으로 사용.. 이전 1 2 다음