2023.5.9
#4.0 Props
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({text, big}){
return <button style={{
backgroundColor:"tomato",
color : "white",
padding : "10px 20px",
border :0,
borderRadius:10,
fontSize: big ? 20 : 12,
}}>{text}</button>
}
function App () {
return (
<div>
<Btn text="Save Changes" big={true}/>
<Btn text="Continue" big={false}/>
</div>
);
}
const root = document.querySelector("#root");
ReactDOM.render(<App />, root);
</script>
</body>
</html>
<!--
props는 일종의 방식. 부모 컴포로부터 자식 컴포로 데이터를 보내는 방법!
컴포넌트가 전달받는 첫 번째이자 유일한 정보 : 타입은 오브젝트
-->
Props : 부모 컴포넌트가 자식 컴포넌트에게 유용한 데이터를 전달하는 일종의 방식!
자바의 인터페이스 처럼 공통된 속성을 하나만 만들어서 자식 컴포넌트에게 전달하는 것과 유사한 방식인 것 같다.
함수의 인자처럼 컴포넌트에서 전달할 수 있고,
인자는 단 한개만 존재하며,
해당 인자는 Object의 형식이다.
2023.5.10
#4.1 Memo
Props에는 text나 boolean값 이외에도 function을 보낼 수 있다.
이는 JSX 문법으로 html 태그 자체에 이벤트 리스너를 넣는 것과는 전혀 다르게
단지 Props의 이름이기 때문에 필요한 위치에 개발자가 직접 꺼내서 배치해야 한다.
부모 컴포넌트의 상태(state)값이 변경되면 부모 컴포넌트에 속해있는 자식 컴포넌트는 모두 리렌더링 된다.
하지만 불필요한 리렌더링은 속도의 저하 등 성능의 저하를 유발할 수 있다.
예를 들어 특정 부모 컴포넌트의 자식이 2개가 있을 때, 한 컴포넌트의 Props만 부모 컴포넌트와 연관이 있다면,
연관이 있는 컴포넌트만 리렌더링 되어야 한다.
즉, 부모 컴포넌트의 상태가 변경될 때, 자식 컴포넌트의 Prop이 변경되지 않는다면 React.memo의 기능으로 위의 문제를 해결할 수 있다.
React.memo는 고차 컴포넌트이다.
컴포넌트가 동일한 Props로 동일한 결과를 렌더링 한다면(변경되지 않는다면), React.memo를 호출하고 결과를 메모이징하도록 Wrapping하여 경우에 따라 성능 향상을 누릴수 있다.
즉, React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다.
const MemorizedBtn = React.memo(Btn);
function App () {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<MemorizedBtn text={value} changeValue={changeValue}/>
<MemorizedBtn text="Continue" />
</div>
);
}
const root = document.querySelector("#root");
ReactDOM.render(<App />, root);
PropTypes
아래의 두 패키지를 설치해준다.
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js "></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script> <!--내가 어떤 타입의 Props를 받고 있는지 체크 해준다.-->두 번째 라인의 패키지는 내가 전달하는 Props의 타입, 필수 여부등의 정보를 명시해주며 validation해주는 패키지이다.
기본적으로 실제 받는 쪽에선 Number 타입의 데이터를 기대하고 있지만, 보내는 데이터가 string 이라면 소스코드 자체에서는 에러가 발생하지 않고, 콘솔에서도 에러를 확인할 수 없다. 그저 결과만 예상과 다르게 나와 발을 동동 구를 뿐,,,,
이러한 문제를 방지하기 위해 콘솔에 잘못됨을 노출 시켜주기 위해 만들어진 패키징이다.
2023-05-11
#5.0 Create React App
스크립트를 직접 import할 필요 없이 명령어를 통해 리액트를 사용함에 있어서 필요한 스크립트들을 자동으로 다운로드 받아준다.
준비 사항으로는 node.js가 설치 되어 있고, npx명령어가 작동해야 한다.
Command Promt를 실행하고 프로젝트를 생성할 경로로 이동한 후에 아래의 명령어를 입력하자
npx create-react-app {프로젝트이름}
터미널에서 npm run start로 프로젝트 실행
#5.1 Tour of CRA
컴포넌트를 임포트만 하고 사용하지 않은 상태로 실행하면 에러가 발생한다.
컴포넌트당 하나의 js파일을 가질 수 있어서 모듈화가 가능하다.
컴포넌트별 스타일은 {컴포넌트명}.module.css 파일을 생성 후에 import하여 허용
여기서 스타일은 className이나 id로 import한 스타일 객체의 property를 전달하여 적용된다.
그리하여 "컴포넌트명-클래스명-랜덤"구조로 클래스명이 랜덤 생성 되기 때문이 이름을 외울 필요가 없는 장점이 있다.
'FrontEnd > React' 카테고리의 다른 글
| nomadcorders_왕초보를 위한 React Native 101_Day2 (0) | 2023.05.30 |
|---|---|
| nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY4 (0) | 2023.05.11 |
| nomadcorders_왕초보를 위한 React Native 101 (0) | 2023.05.10 |
| nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY2 (0) | 2023.03.24 |
| nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY1 (0) | 2023.03.22 |
