22.10.11

벨로퍼트 리액트 - 1장 복습

 

컴포넌트 작성 규칙

** 컴포넌트 : 일종의 UI 조각. 재사용 가능함

import React from 'react'; // 리액트 불러오기

function Hello() {
  return <div>안녕하세요</div>
}

export default Hello; // 컴포넌트 내보내기(타 컴포넌트에서 불러오기 가능)

JSX 작성 규칙

1. 태그는 꼭 닫힌 태그로

// X
<div> 
<input> 
<br> 

// O
<div></div> 
<input /> 
<br/>

// 태그와 태그 사이에 내용이 들어가지 않을때 Self Closing 태그로 닫아줌

1. 태그는 꼭 감싸주기

// X
<Component1 />
<Component2 />

// O
<div>
	<Component1 />
	<Component2 />
</div>

// 또는
<>
	<Component1 />
	<Component2 />
</>
// <></> => Fragment. 브라우저에서 별도의 엘리먼트로 나타나지 않음. 

1. JSX 내부에서 자바스크립트 변수를 사용할때는 {} 로 감싸기

<div>{name}</div>

1. 인라인 스타일은 객체형태로 작성하고 속성들은 camelCase 형태로 네이밍하기

const style = {
	backgroundColor: 'black',
	color: 'pink',
	fontSize: 24, // 기본 단위는 px
	padding: '1rem' // 다른 단위 사용시에는 문자열로 설정
}

return (
	<>
		<div style={style}>안녕하세용</div>
	</>
)

1. CSS class는 className= 으로 설정하기

<div className="blue-box"></div>

1. 주석은 {/* 이렇게 작성하기 */} 태그 내부에서는 // 이렇게 작성하기

{/* JSX에서 주석을 작성하는 방법 */}
<div>
	// 열린 태그 내부에서는 이렇게 작성하기
</div>

props 사용

App.js

import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello name="Harry" color="green"/> // 전달하고 싶은 props 값을 넣어준다 
      <Hello color="blue"/>
    </div>
  );
}

export default App;

Hello.js

import React from 'react';

function Hello({name, color}) { //  = function Hello(props)
    // props는 객체 형태로 전달되기 때문에 비구조화 할당으로 
		// 간결하게 코드를 작성 할 수 있다 

    return <div style={{color}}>안녕하세요 {name}</div>
		// = return <div style={{color: props.color}}>안녕하세요 {props.name}</div>
}

// props의 값이 전달되지 않았을때 나타낼 기본값
Hello.defaultProps = {
    name: '이름없음'
}

export default Hello;

props.children

: 컴포넌트 태그 사이에 넣은 값 조회할때 사용

<Wrapper>
	<User />
</Wrapper>

// 위와 같은 구조일때 User 컴포넌트의 내용이 보여지게 하기 위해서 
// Wrapper.js에서 아래처럼 사용

function Wrapper({children}){
	return (
		<div>
			{children}
		</div>
	)
}

조건부 렌더링

: 특정 조건에 따라 다른 결과물 렌더링 하는것