[Java 풀스택 과정 강의] 1월 23일

※ TIL와는 별개로 적는 개인 개발 일지라서 말은 좀 편하게하는 페이지입니다.
일지이기 때문에 일기의 성격이 더 강합니다.

 

 

이어서 1월 23일의 강의를 정리한다. React는 개념 자체는 짧은데 그걸 이해하기 위한 코드가 생각보다 많은 듯하다.

 

기본적인 컴포넌트 사용

React는 보통의 경우 src 폴더 내의 components를 만들어 그 안에 컴포넌트들을 생성한다. 그리고 import하여 불러오는데 다음과 같이 사용한다.

 

import 컴포넌트명 from './components/컴포넌트명';

 

이렇게 파일 상단에 넣으면 사용할 준비가 끝난다.

그리고 내부에서는 이렇게 사용한다.

function App() {
  return (
    <div className="App">
      <컴포넌트명/>
      <컴포넌트명></컴포넌트명>
    </div>
  );
}

 

React의 특징 중 하나는 모든 요소에 여는태그와 닫는태그를 해야한단 점이다. 그렇기 때문에 /로 닫아버리거나, 아래처럼 여는태그와 닫는 태그를 따로 두거나 한다.

 

 

 

일반 함수 vs 화살표 함수

기본적으로 React에서는 화살표 함수를 자주 사용한다. 문법 스타일과 호이스팅/export의 차이만 있는데, 그냥 화살표 함수를 쓴다. 딱히 함수 컴포넌트에서 this를 쓸 일도 없기 때문.

 

 

JSX

React는 JSX 문법을 사용하고 있다. JSX 문법의 몇 가지 예제만 다루겠다.

 

{}

{} 안은 JavaScript로 취급한다는 뜻이다.

 

변수 && expression와 변수 || expression

변수 && expression의 경우 true일 경우 오른쪽, false일 경우 왼쪽이 나타난다.

변수 || expression의 경우 왼쪽이 true일 경우 왼쪽, 그렇지 않으면 오른쪽

 

카멜 표기법

JSX에서는 -는 사용할 수 없고, 카멜표기법이 사용된다. 그리고 class와 for의 경우 각자 className과 htmlFor로 바뀌어 나타난다. JavaScript 예약어와 혼동되지 않게 하기 위해서다.

 

인라인 스타일

인라인 스타일은 다음처럼 적용된다.

 

            <div className='react' style={{
                margin: '0 auto',
                width: '50%',
                background: 'red',
                fontSize: '36px',
                padding: 10,
                marginTop: '20px'
            }}>

 

 

 

Props와 상속

컴포넌트의 속성을 바로 props라고 한다. 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용한다. 부모 컴포넌트에서는 다음 처럼 정한다.

 

function App() {
const propsvalue = 'prop 내용';
    return (
		<자식컴포넌트명 propsname={propsvalue}/>
    );
}

 

이렇게 부모에서 전달하고 싶은 props의 이름과 값을 지정한다. 그러면 이제 자식에서 다음과 같이 받아들인다.

 

const 자식컴포넌트명 = (props) => {
  return(
    <div className={props.propsname}/>
  );
}

 

props가 매개변수가 되고, 값을 부를때는 앞에 props가 된다. 즉, props라는 객체 안에 props name이 key가 되어 들어가는 형태라고 할 수 있다. 이게 React의 특징 중 하나인 props이므로 기억해두는 게 좋다.