이 글은 <Do it! 리액트 프로그래밍 정석>을 참고하여 작성하였습니다.정리 느낌으로 작성하였으므로 내용이 정확하지 않고 구체적이지 않을 수 있습니다.
JSX: JavaScript XML의 줄임말. '자바스크립트에 XML을 추가한 확장형 문법'
//오류 리포트
그런데 리액트 서버를 실행하려는 도중 에러가 났다.
pakege.json의 browerslist에 오타가 났었다.
그 후 고쳐도 node-sass에서 오류가 나서 pakege.json에서 지우고 npm으로 따로 설치하였다.
그 후에도 '@babel/plugin-proposal-private-property-in-object'을 찾을 수 없다는 오류가 떴다.
그래서 npm install --save-dev @babel/plugin-proposal-private-property-in-object로 설치하였더니 잘 실행되었다. 왜 설치가 안됐을까...?
아무튼 다시 해보자
기존에는 js와 HTML을 분리해 작성해서 번거로웠다. 그에 반해 JSX를 사용하면 하나의 파일에 js와 HTML을 동시에 작성할 수 있어 편리하다.
JSX 사용해보기
App.js에 작성했다.
반환값만 보면 HTML과 비슷하지만 img 태그 끝에 /> 표시가 있다.
JSX는 XML 마크업 규칙을 따르기 때문이다.
출력 화면
index.js
index.js 파일은 yarn start 명령어로 리액트 서버를 구동했을 때 최초로 실행된다.
컴포넌트의 개념
MVC:기존의 웹 프레임워크 방식. 정보 담당인 모델(Model),화면 담당을 뷰(view), 구동 담당을 컨트롤러(Controller)라고 부름
MVC의 장점:코드 관리가 효율적
단점:각 요소의 의존성이 높아(하나만 수정이 어려움) 재활용이 어렵다.
하지만 웹 사이트의 화면은 반복적인 부분이 많음
컴포넌트 -> 블록 조립하듯이 사용
간단한 컴포넌트 추가하고 화면으로 띄워보기
src -> 03 디렉터리 -> TodaysPlan.js 생성
그 후 App.js에 컴포넌트 추가
컴포넌트 이름 주의점
!!무조건 대문자로 시작해야한다!!
컴포넌트 구성 요소
property:상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터. 이떄 프로퍼티값은 수정할 수 없다.
state:컴포넌트의 상태를 저장하고 변경할 수 있는 데이터
context:부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터
property 기초
App 컴포넌트에서 프로퍼티를 MyComponent에 전달
속성(attribure)형태로 전달되는 값을 프로퍼티라고 한다.
class App extends React.Component {
render() {
return(
<div className="body">}
상위 컴포넌트 App에서 프로퍼티 name을 하위에 전달해줌
MyComponent 컴포넌트에서는 name이라는 이름의 프로퍼티로 전달받은 "message"라는 문자열 값을 render() 함수에서 참조
this.props.name으로 프로퍼티값 참조
class MyComponent extends React.Component {
render() {
const name = this.props.name;
return {name};
}
}
App > MyComponent 방향으로 전달 : 단방향 흐름
프로퍼티 다양하게 쓰기
프로퍼티는 js 자료형 모두 사용 가능,이때 자료형은 미리 선언해주자 - > 리액트 엔진이 값의 변화를 효율적으로 감지하고 개발자가 실수로 지정되지 않은 자료형을 프로퍼티에 전달하려고 할 때 경고해준다.
프로퍼티 자료형 선언 -> prop-types 이용
1.prop-types 라이브러리를 PropTypes라는 이름으로 임포트
2.프로퍼티 name 출력
3.propTypes(임포트 한 PropTypes와 다르다)라는 특수 변수를 사용하여 자료형 정의
4.프로퍼티의 자료형을 객체 형태로 지정하여 PropsComponent.propTypes에 저장
App.js에서 띄워주기
다양한 프로퍼티 사용하기
프로퍼티에 문자열 전달할 때는 큰따옴표("")사용.하지만 숫자형이나 불리언 등의 값을 전달할 때는 x, 리액트에서 문자열 외는 {} 써야함.
구조 분해 할당을 이용하여 프로퍼티들을 지역 변수로 재정의함
이렇게 하면 this.props.boolvalue라고 쓰지 않아도 this.props 생략하고 접근 가능, + 개발할 때 프로퍼티 목록 참고하기용으로 편함
* 실무에서는 개발자 간의 실수를 줄이기 위해 변수에 객체를 담아 전달
불리언 프로퍼티는 특별한 방법으로 전달 가능
true면 프로퍼티 이름만 선언해도 전달 가능
<컴포넌트이름 프로퍼티 />
false면 프로퍼티 이름도 생략
<컴포넌트이름>
실무에서 많이 씀
객체형 프로퍼티 사용하기
1.내장 함수 String()과 Object.entries()를 사용하여 객체를 문자열로 변환하여 출력
2.객체 프로퍼티 자료형 -> shape를 사용하여 정의
필수 프로퍼티 사용하기
특정 컴포넌트에 꼭 전달해야하는 프로퍼티가 있음 -> 필수 프로퍼티로 지정
컴포넌트.js 파일에서 propTypes 자료형 객체 안에
requiredStringValue: PropTypes.string.isRequired 구문 추가
필수 프로퍼티 전달 안 하면 콘솔에 경고 메세지 뜸
프로퍼티 기본값 설정
컴포넌트.js 파일에 예를 들면
DefaultPropsComponent.defaultProps = {
boolValue: false,
};
추가,defaultProps라는 특수 변수를 사용하여 프로퍼티 기본값 정의
자식 프로퍼티 사용하기
JSX에서 컴포넌트 하위에 배치한 노드(또는 컴포넌트)를 하위 컴포넌트에서 프로퍼티로 접근할 수 있게 해줌.
< ChildProperty >
< div > < span > 자식 노드 < /span > < /div >
< /ChildProperty >
이런 식으로 쓰면 ChildProperty 컴포넌트에서 받을 수 있다
...
return < div >{this.props.children} < /div >;
...
ChildProperty.propTypes = {
children: PropTypes.node,
};
