내일 배움 캠프 23_06_13 TIL

그동안 프로젝트 하느랴 뭐 하느랴 갖은 변명을 하며 못써왔던 TIL을 다시 작성하고자 다짐하며
글을 써 봅니다 이번 주에 들어서 드디어 주특기 트랙인 React를 배우게 됐는데

 

React는 함수형 컴포넌트와 클래스형 컴포넌트가 존재하며 주 도구로는 함수형 컴포넌트를 사용하며

React에서는 컴포넌트를 통해 UI를 재사용이 가능한 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

이에 관한 예시로는

개인 Todo List 과제화면

원래 js로 작성을 하게되면 변경사항을 수정하고 변경사항을 저장하게되면
지금은 따로 DB를 사용하지 않기에 원래 기본적으로 존재하는
리액트 공부하기 Todo-List만 존재하고 아래의 열심히 공부하기 Todo-List는 사라지지만
React는 컴포넌트별로 재렌더링을 하기 때문에 

우측위 로고를 변경한 모습

우측 위에서 React h2태그를 리에잇트! 라는 이번에 주특기 주차를 함께하게된 팀원들과의 조 이름으로 변경을해도
아래의 Todo-List는 변동이 없이 해당 로고부분만 재렌더링이 되는것을 확인할 수 있습니다. 

 

또한 리액트는 JSX 라는 파일명을 사용할 수 있는데

//컴포넌트 이름 첫글자는 무조건 대문자

function App() {

  //이 구역이 자바스크립트를 쓸 수 있는 영역

  const x = 1;

  function testFunc() {}

  return (

    // JSX(Javascript + XML - HTML) : 작스~

    //{} 중괄호를 사용하면 JS문법을 사용할 수 있음

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <p>

          Edit <code>src/App.js</code> and save to reload.

        </p>

        <a

          className="App-link"

          href="https://reactjs.org"

          target="_blank"

          rel="noopener noreferrer"

        >

          Learn React

        </a>

      </header>

    </div>

  );

}

export default App;

이러한 코드처럼 Javascript 와 XML - HTML 을 사용하는 파일에대해서는 JSX라는 파일명을 붙여줘서 사용합니다.

 

또 이번주차 강의에서 중요하다고 생각되는 Props와 State 중 하나인 Props에 관해서

function Son(props) {

  console.log("props", props.GFName);

  return <div>나는 {props.GFName}의 손자에요!</div>;

}

//부모 -> 자식 정보를 전달했다!

function Mother(props) {

  const GFName = props.GrandFatherName;

  const name = "원부인";

  return <Son GFName={GFName} />;

}

function GrandFather() {

  const name = "원노인";

  return <Mother GrandFatherName={name} />;

}

function App() {

  return <GrandFather />;

}

이런식으로 Props를 사용해서 부모에서 자식으로 값을 상속시키면서 사용할 수 있고 또한 이 Props는 부모에서 자식으로만 상속시키며

function App() {

  return <User>안녕하세요!</User>;

}

function User(props) {

  console.log("props", props);

  return <div>{props.children}</div>;

}

이런식으로 자식요소의 children값을 받아서 사용할 수 있습니다.