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)

많은 Java 개발자들이 Kotlin을 배우려고하고 사용하려고합니다. 
그리고 그들중 대부분은 Kotlin을 조금 더 간결한 Java처럼 사용합니다. immutable변수나 타입 추론 등을 사용하면서 코틀린이 좋다 라고 말하곤 하죠.(네, 제 이야기였습니다) 

그렇게 되는 근본적인 이유는 무엇일까요? Java를 사용하는 백엔드 개발자들은 대부분 스프링 부트를 사용하고, 코틀린역시 스프링 부트 환경에서 사용하는 일이 많습니다. 그때문에 익숙한 환경에서 익숙한 방식으로 개발하게 되는 것 이겠죠. 적어도 저는 그랬습니다.

보통 코틀린을 시작할때는 코틀린 입문 서적 같은 책을 한권 읽어보고, 코틀린 언어의 특징 들을 살펴봅니다. 그러면서 이뮤터블 이라던가 델리게이션이라던가 코루틴이라던가 하는 코틀린의 특징에 대해 조금 알게되고 프로젝트를 시작하게 되죠.
이미 경험 많은 개발자가 함께하는 프로젝트가 아니라면 앞서 말씀드린것과 같이 Java 스러운 Kotlin코드를 짜게되기 마련입니다. 왜냐면 본인이 가장 잘 하던 방법을 사용하게 되고, 코틀린은 Java 스러운 코드도 훌륭하게 돌려주거든요. 하지만 이내 곧 깨닫게 됩니다. '나는 문법만 코틀린을 쓰고, 코틀린 라이브러리가 제공해주는 조금 더 편리한 기능만 쓰고있고 코틀린의 핵심적인 기능은 안쓰고 있다' 라는 사실을요. 

대부분의 코틀린 기본서적에서 코틀린의 특징을 잘 잡아주지만 그것을 잘 이해하고, 사용하게 할 만큼의 정보를 제공해주진 않습니다. 코틀린은 그만큼 다양한 기능이 많이 있어서 아마 자세히 설명 하자면 책이 3권쯤은 필요할거같습니다.

그런데 그것을 실재로 해낸 책이 있습니다. 바로 '코틀린 아카데미' 시리즈죠. 그중 제가 읽을 코틀린 아카데미 - 고급편은 코틀린이 그토록 자랑했지만 실제 적용하긴 어려웠던 내용들을 차근차근 설명 해 주고 있습니다. 특히 1장 Variance에서 JVM의 Type Erase 때문에 발생하는 문제를 Kotlin이 어떻게 처리하는지 알려줍니다. 1장만 보더라도 기존에 'in을 쓰니까 빨간줄이 사라지는구나'라고 생각하던 개발자들에겐 크게 도움이 될 것입니다. 그 외에도 델리게이션을 왜, 어떻게 쓰는지에 대해 자세히 설명 해 주고 Contract가 어떻게 컴파일러에게 코드의 제약을 설명해 주는지 알려줍니다. 또, Java 와의 상호운용성을 심도있게 다루면서 JVM에서 코틀린을 어떻게 사용해야하는지 가이드해줍니다. 코틀린 멀티플랫폼과 Kotlin/JS 부분도 제가 평소에 관심을 가지는 부분이라 재밌게 읽었습니다. 특히 이 두 부분은 그동안 '가능하긴 하지만 아직 쓸만하려면 멀었다' 라는 기존의 평가에 대해 다시 한 번 생각하게 만들어줬습니다. 그 외에도 Reflection, Annotation Processor, Kotlin Symbol Processor ,Kotlin Compiler Plugin 역시 자세히 다루고 있습니다. 

일부 기능은 저같은 웹개발자들은 크게 관심이 없을 수 있는 기능이기도하고, 프레임워크를 만드는 수준의 개발이 아니라면 꼭 알아야 하는 지식은 아닐 수 있으나 코틀린이란 언어에 대해 조금 더 알 수 있는 계기가 될 수 있으니 책을 1회정도는 가볍게 끝까지 소설 읽듯이 읽어보시고 필요한 부분들을 다시한번 공부하듯이 읽어보시기를 추천합니다.