Component

• 스스로 상태를 관리하는 캡슐화된 코드 조각
• 컴포넌트는 하나의 JSX를 반환하는 함수.

  function App(){  
  return (
    <h1> Hello </h1>
    <h1> World </h1>
   )  
  }

  ReactDom.render(
    document.getElementById('root')  
  )

위 코드에서 App() 함수가 컴포넌트. div 태크로만들어진 JSX를 반환한다.
ReactDom이 render 메소드를 이용해서 화면에 그린다.

JSX로 컴포넌트를 만드는것과 함수형태로 컴포넌트를 만드는 방식의차이

1. 컴포넌트는 기본적으로 함수이기 때문에 자신만에 고유한 로직이 들거갈 수 있다.
2. 스스로 상태를 가질 수 있다.

컴포넌트 생성시 주의사항

• 컴포넌트 이름은 PascalCase
  • MyComponent
  • ArticlePage
  • UserProfile
• 컴포넌트는 의미 단위로 쪼개서 파일을 분리한다.
  • header, content, footer ...
  • 각 컴포넌트가 역할을 가지도록한다.
• 최 상위 컴포넌트는 일반적으로 App이다.
• App컴포넌트를 ReactDom.render() 를 이용해서 랜더링 하는 코드는 일반적으로 index.js에 넣는다.
• index.js 는 모든 컴포넌트의 엔트리 포인트, App.js는 모든 컴포넌트의 root 컴포넌드

Props

• 프로퍼티의 줄임말.
• 컴포넌트에서 하위 컴포넌트로 어떤 값을 전달해줄때 사용하는 요소

function App() { 
  return( 
    <div> <MyComponent value={'test'} /> </div> 
  ) 
} 

function MyComponent(props) { 
  return <div>{props.value} </div> 
}

• App Component가 하위 컴포넌트인 MyComponent로 데이터를 전달해줌.
• 전달반은 데이터는 object형태이며, 전달 했던 속성 이름으로 접근해서 사용할 수 있음.

    function App() { 
    return(
     <div>
       <MyComponent>
         <h1> value </h1> 
       </MyComponent>
     </div>
    )
    }


  function MyComponent(props) {  
    return
      {props.children}
    }

• 상위 컴포넌트가 값을 감싸는 형태로 전달도 가능. 이때는 props에서 children을 이용해서 접근
• 이때 children으로 전달받은 데이터는 <h1> 태그로 이루어진 JSX 값이다.

Props 활용팁.

• 구조분해 할당을 잘 활용한다.
• 특정 Props에 기본 값을 줄 수 있다.(defaultProps).
• Props는 읽기 전용.

State

• 컴포넌트 내부에서 사용되는 변수
  • state 값이 변하면 컴포넌트가 리렌더링됨.
  • 렌더링 사이클에서 값이 보존됨

function App(){ 
  const[value, setValue] = useState(); 
  return ( 
    <div> {value} </div>
  ) 
}

• useState를 사용하면 value와 setValue를 리턴해준다.
• setValue를 이용하면 value를 set할 수 있으며 이때 리 랜더링이 실행됨
• value가 set 되는 시점은 리렌더링이 된 이후라는점에 주의해야함.

Hooks

• 클래스형 컴포넌트의 단점을 보완하기 위해 함수형 컴포넌트에 지급된 개념
• 지금까지는 함수형 컴포넌트를 사용했다.
• 하지만 클래스형 컴포넌트라는 방식도 있다.
  • 과거에 useState 같은 Hooks는 이용할 수 없었기때문에 클래스형 컴포넌트를 이용했다.
  • 클래스형은 몇가지 안좋은점이 있어서 점점 안쓰게 되었다.

JSX란?

• Javascript 확장 문법으로 Javascript XML이란 의미.

• 리엑트에서는 JSX를 이용하여 화면(컴포넌트)을 표시함.

  • 리엑트가 JSX -> HTML을 만들어줌

  JSX의 특징

  • JSX에서 사용되는 태그의 속성 이름이 HTML과 약간 다름
    • class => className
    • for => htmlFor
    • onclick => onClick
  • 태그를 명시적으로 닫아줘야함.

        //잘못된 JSX
        <button class="btn"> hello, world </button>
        <input type="text"> 

        //옳게된 JSX\`\`\` - 하나의 태그로 감싸져 있어야함.
        <div>
          <button className="btn"> hello, world </button>
          <input type="text"/> 
        </div>

JSX에서 Javascript사용하기

1. 중괄호 {} 안에서 JavaScript 표현식 사용

JSX 안에서는 중괄호 **`` 안에 JavaScript 표현식**을 사용할 수 있습니다.

const name = "Alice";

return <h1>Hello, {name}!</h1>;

• ✅ 사용 가능한 것: 변수, 함수 호출, 삼항 연산자 등 표현식(expression)
• ❌ 사용 불가: if, for 같은 문장(statement)

2. 조건부 렌더링

2-1. 삼항 연산자

const isLoggedIn = true;

return <div>{isLoggedIn ? "Welcome!" : "Please log in."}</div>;

2-2. 논리 AND (&&)

const hasMessages = true;

return <div>{hasMessages && <p>You have new messages.</p>}</div>;

3. 리스트 렌더링 (map 사용)

const items = ["Apple", "Banana", "Orange"];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

• key 속성은 필수는 아니지만 React가 효율적으로 렌더링하기 위해 사용합니다.

4. 반복문 사용하기 (for, while 등)

JSX 안에서는 for, while 같은 문장(statement) 은 직접 사용할 수 없습니다. 대신 반복문은 JSX 바깥에서 데이터를 처리한 뒤 JSX에서는 map() 등으로 표현식 형태로 렌더링합니다.

const items = ["Apple", "Banana", "Orange"];
const elements = [];

for (let i = 0; i < items.length; i++) {
  elements.push(<li key={i}>{items[i]}</li>);
}

return <ul>{elements}</ul>;

• 또는 map() 사용이 가장 권장되는 방식입니다 (위의 리스트 렌더링 참고).

5. 함수 호출

function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: "John", lastName: "Doe" };

return <h1>Hello, {formatName(user)}!</h1>;

6. 속성(prop)에도 JavaScript 표현식 사용 가능

const isDisabled = true;

return <button disabled={isDisabled}>Click me</button>;

7. 스타일 객체도 JavaScript로 정의 가능

const style = {
  color: "blue",
  fontSize: 20
};

return <p style={style}>Styled Text</p>;

• CSS 속성 이름은 camelCase로 써야 합니다 (font-size → fontSize)