20. React

React가 뭐야!

Web-app을 쉽게 만들수있는 라이브러리 중 하나
장점으로는
1. 모바일앱 발행이 쉬움
2. 앱 같은 UX
3. 컴포넌트 재사용가능

react project 생성

npx create-react-app@latest 폴더이름

JSX 문법

1. 클래스명은 className = ""
2. {}사용해서 변수,함수 등 넣을수있음
3. 스타일은 style={{color: 'red'}} 객체형태로 중괄호안에 넣어주면 됨

컴포넌트 만들기

React에서 컴포넌트는 JSX로 작성됨 JSX는 JavaScript를 확장한 문법.
한번 만들어 놓은 컴포넌트는 재사용이 가능하다.

App 컴포넌트는 함수 형태로 작성되어 있으며, 함수 자체가 컴포넌트를 나타낸다.

각각의 component를 만들어준다. 첫문자는 무조건 대문자
필요한 곳에 import해주고 import한 component를 원하는 위치에 넣어줌 HTML처럼

const Hello = () => {
    return <h1>Hello</h1>;
};

function App() {
	return <div className='App'>
↘️{/*import한 component를 원하는 위치에 넣어줌 HTML처럼*/}
<Hello />
</div>;
}

둘 이상의 요소를 포함할 경우, 해당 JSX를 소괄호로 감싸야 함

const Hello = () => {
return (
    <div>
        <h1>Hello</h1>
         <World />
    </div>
)
};

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React" },
  { id: 2, title: "Installation", content: "You can install React from npm" }
];

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  // TODO: postToJSX 함수를 이용하여 에러를 해결하고 여러 개의 엘리먼트롤 표시해보세요.
  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map((post) => postToJSX(post))}
    </div>
  );
}

map은 posts의 배열을 순회하여 post 매개변수에 새로운값을 넣어준다. 잊지말자.
그다음 postToJSX 함수를 호출하고, post변수에 map이 순회했던 요소들을 전달해주는것이지...

posts.map((post) => postToJSX(post)) 코드에서 posts 배열을 순회하면서 각 요소를 post 매개변수로 전달
postToJSX 함수를 호출하고 post 매개변수를 인자로 전달하여 실행
이렇게 postToJSX(post) 호출 결과로 반환된 JSX 엘리먼트들이 배열로 만들어짐

따라서 {posts.map((post) => postToJSX(post))} 코드는 posts 배열의 요소들을 순회하며 각각의 요소에 대해 postToJSX 함수를 호출하여 JSX 엘리먼트로 변환하고, 이를 배열로 반환함.
그리고 이 배열은 JSX 안에 표시되게하고,,

CSS 작성법

컴포넌트 내부에서 인라인 방식 사용

중괄호를 적고 객체로 사용해야한다.
value는 ""사용
대시(-) 사용불가 CamelCase적용

const Hello = () => {
return (
    <div>
        <h1 style={
            {
                color:"red",
                backgroundColor: "yellow"
            
            }
        }>Hello</h1>
         <World />
    </div>
)
};

이벤트 처리

html의 이벤트 처리 방식
<button onclick="handleEvent()">Event</button>
React의 이벤트 처리 방식
<button onClick={handleEvent}>Event</button>

함수호출시에 따로()소괄호를 안씀
2개 외에도 여러가지~방법이있군요
상황에 맞게.. 가독성있는 코드를 작성해야쥐...

// 함수 만들어놓기
function showName(){
  console.log("김선미");
} 
const Hello = () => {
return (
  <div>
      <h1>Hello</h1>
      // 1. 함수 호출하여 사용
      <button onClick={showName}>Show name</button>
      // 2. 함수 직접 입력하여 사용(매개변수사용이 쉬운 장점이 있지)
      <button onClick={() => {showAge('낭량18세')}
      }
      >Show age</button>
  </div>
)
};