React (1)

개인 프로젝트 회고를 하기 전 React라는 새로운 기술에 대한 개념정리를 먼저 하려 한다.

개인적으로 어려워했던 부분을 정리하고 후에 회고를 설명 해보면 좋을 듯 싶다.

역시 새로운 것을 배운다는 건 쉽지 않음에 틀림이 없고 많은 어려움과 난관이 있었지만 해내긴 했다..

• React Components

컴포넌트를 통해 UI 재사용이 가능하고 개벽적인 여러 조각으로 나눠져 있고 그 조각을을 따로 살펴 볼 수 있다.

개념적으론 JS함수와 유사하다고 한다.

props라고 하는 임의의 입력을 받은 후, React element를 반환하여 화면에 표시하게 된다.

• 함수형

// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
//  
function App () {
	return <div>hello</div>
}

• 클래스형

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

두 가지 방법이 있다고 하지만 아무래도 익숙한 함수형을 자주 사용할 듯 싶다.

눈에 익는 데 시간은 다소 걸리겠지만 친해져 보자!

최상단에 필요한 파일들을 import 해오는 구역,
중단엔 JS코드를 쓸 수 있는 구역 마지막 밑 return구역 밑으론 JSX, 작스라고 불리는 곳 세 구역으로 나뉜다고 한다.
작스를 통해 우리가 볼 수 있는 화면을 랜더링(Rendering)을 하게된다.

• 주의 사항

  -> 컴포넌트를 만들 시, 대문자 시작/폴더는 소문자/파일은 대문자로 작명을 한다.

• 여기서 컴포넌트가 무엇이냐?

  => React에 존재하는 모드 UI요소들!

여기엔 또 부모와 자식 컴포넌트 관계가 있다
(컴포넌트 안에 컴포넌트 넣기)

import "./App.css";

function App() {
  return (
    <div>
      <input type= "text" />
    </div>
  );
}

export default App;

• <input /> JSX에선 태그를 닫아줘야 오류가 발생하지 않는다.

• 무조건 1개의 element를 반환한다.

  밖에 있는 코드는 읽지를 못한다.

• JSX에서 JS값을 가져오려면 {}를 써준다

function App() {
	const cat_name = 'perl';
  return (
    <div>
      hello {cat_name}!
    </div>
  );
}	

• 그 외에 매서드,삼항연산자 등 JS문법을 JSX 안에 사용하려면 {}를 써줘야 한다!

• style을 주거나 class를 줄 때는

  태그 내에서 속성값을 줄 때, class 대신 className을 작성해줘야 하고 style은 인라인 형식으로 넣어줘도 된다.

뒤에 배운 내용이지만 처음 style을 줄 때 코드가 어지러워져서 애먹었다..