11. React 시작 [리액트 입문강의 내용 정리 component part2까지]

알고리즘주차는 끝났고! 어느정도 JavaScript의 메서드나 함수를 활용하는 연습을 다 하고, (아직 애기수준)

 

본격적으로 react주차에 접어들었다. 

 

리액트는 신세계다 너무 꿀잼이다 ☺️ (아직은ㅎㅎ..)

 

알고리즘문제풀기 첫날에도 너무 신기하고 이게 풀리는게 또 재밌고, 고등학교 때 수학은 되게 못했었는데 이건 수학적이면서도 좀 더 편하게 컴퓨터의 언어로 풀어간다는게 흥미로웠다. 

 

초반엔 엄청 틀렸지만, 점점 메서드활용에 능숙해지는게 느껴져서 기분 좋고 코드리뷰하며 다른 사람들의 코드를 구경하는 것도 재밌어서 후딱 지나간 일주일이었다!!

 

새로운 언어와 문법을 배운다는건 뭔가 설렌다

처음 영어를 배우던 때 같다

 

리액트 강의를 듣기 시작하고나서도 

오랜만에 HTML을 만지니 기억이 가물가물하면서도 손은 기억을 하고있는건지 (ㅋㅋㅋ) 아~이거 뭐더라 하면서 손으로는 줄줄 타이핑 치고있는 나를 발견했다.

리액트에서 이용하는 HTML파트 또한 원래 html의 문법이 아닌, JSX문법을 이용한다.

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const handleClick = () => {
    alert("클릭!");
  };
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <span>이것은 내가 만든 App컴포넌트입니다</span>
      <button onClick={handleClick}>클릭! </button>
    </div>
  );
}

export default App;

Return 문의 위까지가 JS를 쓸 수 있는 영역.

리턴문 아래로는 HTML태그가 JSX문법으로 작성된다.

새로운 컴포넌트를 만들 때에는, 위에서 App과 같이

1. 첫글자는 꼭 대문자
2. 폴더는 소문자로 시작하는 camel case로. 

 

 

카멜케이스(낙타표기법)란, 대상의 이름을 띄어쓰기 없이 짓기 위하여 따르는 관례인 네이밍컨벤션(Naming convention)의 하나다.

예를 들면 backgroundColor, typeName, iPhone

(반대로 스네이크케이스는 phone_number, created_at, updated_at이런 식!)

CamelCase...

버튼클릭 HTML과 차이점

<button onclick="activateLasers()">

  Activate Lasers

</button>

->리액트는 이렇게…

<button onClick={activateLasers}>

  Activate Lasers

</button>

Ex…

<button onClick={handleClick}>클릭! </button>

const handleClick = () => {

    alert("클릭!");

 

function Child() {
  return <div> Hi. </div>;
}

function Mother() {
  return <Child />;
}

function Grandfather() {
  return <Mother />;
}

function App() {
  return <Grandfather />;
}

export default App;

컴포넌트는 외부에서 이용하려면 가장 아래에 export를 해줘야 하고, 가져올 땐 위에 import를 붙여준다.

import React from "react";

 

이렇게.....

컴포넌트의 부모자식관계는,

다른 component를 품는게 부모 component, 그리고 품어지는게 자식 component라고 표현된다.

위에 있는 코드블럭이 그 관계를 잘 나타낸다.

가장 아래에 default App;

그 위에 function App(){

 return<AnotherFunction/>;

}

그 위에 AnotherFunction(){

return …….

}

이런 식으로 ….