리액트 (3) 썸네일형 리스트형 리액트 컴포넌트 props와 state 컴포넌트의 속성 값을 지닌 props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props를 받을 수만 있고 받은 props는 수정 할 수 없습니다. 컴포넌트의 상태 값을 지닌 state : 컴포넌트 내부에 선언하며 내부에서 값을 수정 할 수있습니다. 클래스형 컴포넌트 render 함수가 꼭 필요 state 사용 가능 라이프사이클 기능 사용 가능 임의 메서드 정의 가능 함수형 컴포넌트 장점 클래스형 컴포넌트보다 선언하기 편함 클래스형 컴포넌트보다 메모리 자원도 덜 사용 클래스형 컴포넌트보다 배포 시 결과물의 파일크기도 더 작음 ( 성능과 기능면에서는 차이 없음) 함수형 컴포넌트 단점 state와 라이프사이클 API의 사용이 불가능 ( v16.8 업데이트 이후 Hooks 기능.. 리액트 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 다음
