React (4) 썸네일형 리스트형 리액트 컴포넌트 props와 state 컴포넌트의 속성 값을 지닌 props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받을 수만 있고 받은 props는 수정 할 수 없습니다. 컴포넌트의 상태 값을 지닌 state : 컴포넌트 내부에 선언하며 내부에서 값을 수정 할 수있습니다. 클래스형 컴포넌트 render 함수가 꼭 필요 state 사용 가능 라이프사이클 기능 사용 가능 임의 메서드 정의 가능 함수형 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편함 클래스형 컴포넌트보다 메모리 자원도 덜 사용 클래스형 컴포넌트보다 배포 시 결과물의 파일크기도 더 작음 ( 성능과 기능면에서는 차이 없음) 함수형 컴포넌트 단점 state와 라이프사이클 API의 사용이 불가능 ( v16.8 업데이트 이후 Hooks 기능.. 리액트 컴포넌트 Components Props 리액트를 사용하여 Application의 interface를 설계 할 때, 사용자가 볼 수 있는 요소는 여러 가지 컴포넌트(Components)로 구성됩니다. 컴포넌트의 속성 값을 지닌 props와 상태값을 지닌 state를 사용하는 방법에 대해 알아 보겠습니다. 간단히 설명하자면 props는 부모 컴포넌트가 자식 컴포넌트에게 값을 줍니다. 자식 컴포넌트에서는 props를 받아오기만 하고, 받아온 props를 직접 수정이 불가능 state는 컴포넌트 내부에서 선어나며 내부에서 값을 변경 가능. Components and Props 클래스형 컴포넌트 특징 render 함수 필수 state 기능 사용가능 라이프사이클 기능 사용 가능 임의 메서드 정의 가능 함수형 컴포넌트 장점 클래스형 선언하기가 편함 메모리.. 리액트 JSX 문법 React는 JSX사용이 필수가 아닙니다. 다음 링크를 참조하세요~! https://ko.reactjs.org/docs/react-without-jsx.html JSX 없이 사용하는 React – React A JavaScript library for building user interfaces ko.reactjs.org 일단 저는 JSX에 대해 알아보겠습니다. JSX 소개 const element = Hello, world; 이 문법이 바로 JSX입니다. HTML도 아니고 자바스크립트도 아닙니다. JSX는 자바스크립트의확장된 문법이며 XML과 비슷하게 보이기도 합니다. 이렇게 작성된 코드는 브라우저에 실행되기전에 바벨을 거쳐 일반 자바스크립트 코드로 변환됩니다. 쉽고 익숙한 JSX : JSX는 HTML.. 리액트(React) 시작하기 ✔ 윈도우 환경입니다! ✔ node.js 와 git 설치가 되어있어야 합니다! ✔ 리액트를 공부하면서 까먹지 않기위해 기록합니다! ✔ 리액트를 다루는 기술(개정판)을 보며 공부하는 중입니다! 01 npm init react-app 프로젝트 이름 예) npm init react-app myfirstapp 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략할 수 있습니다. 이 한줄로 아주 간편하게 프로젝트 작업 환경을 구축 할 수 있습니다. 익숙 해진 후에 커스터마이징 할 수도 있습니다. 저는 E 드라이브에 'react' 폴더를 만들고 이 디렉토리에서 "npm init react-app 프로젝트 이름" 명령어를 입력 해주었습니다. 주의 : 대문자 안되나봅니다. 카멜표기법으로 처음에 .. 이전 1 다음
