[React] Jsx - converting HTML to JSX

1. Layout

    function App(){
        const name = 'usami';
        const age = 5;
        return (
            <h1>
                My name is {name} and I'm {age}!
            </h1>
        )
    }

변수를 선언하고 보여질 컴포넌트에 컨텐츠를 업데이트하는데

오잉 컴포넌트는 대부분 비슷한 레이아웃을 하고있네영

그럼 뭐다? 재활용이 가능하게 컴포넌트화 하면 된다!

암튼 이건 컴포넌트에서 다시 다룰거임

 

html input태그에 속성을 입력하는 것을 jsx에서는 props라고 하는데 이걸 어떻게 사용하는지 보겠습니당

 

 

1. 변수로 속성 설정하기

    function App(){
        const inputType = "number"
        const minValue = 5;
        return <input type={inputType} min={minValue} />
    }

 

 

2. curly braces로 속성을 array, object, variables 표현하는 방법

 

3. 속성이 적용되지 않는 것들이 있다! 이런 경우에는 약간의 변환을 해주면 된다

    function App(){
        return <textarea autofocus={true}/>;
    }

요로케 textarea에 autofocus 속성을 true로 줘도 우리의 브라우저에서는 텍스트입력창이 포커스 되지 않은 상태이다.

그런 경우에는 아래 케이스에 해당하는지 보고 수정해봅씨당

1번을 보니 모든 prop 이름은 camelCase로 하라구하네ㅐ여

그럼 autofocus를 autoFocus로 바꿔보고 새로고침을 하면

짠~ focus가 되었습니다

 

 

3. oolean 값을 가지는 속성 표시

true인 경우 <input spellcheck="true"/>를 <input spellCheck/> 또는 <input spellCheck={true}/>로 작성하면 되고

false인 경우 <input spellcheck="false"/>를 <input spellCheck={false}/>로 작성한다

    <!-- 기존 -->
    <input spellcheck="true"/>
    <input spellcheck="false"/>

    <!-- jsx true인 경우 curly braces 생략 가능-->
    <input spellCheck/> 
    <input spellCheck={true}/>
    <input spellCheck={false}/>

 

 

4. class속성은 className으로 해야한다

    <!-- 기존 -->
    <a class="link"/>

    <!-- jsx -->
    <a className="link"/>

 

5. tag의 in-line styles은 object표기가 가능하다

    <!-- 기존 -->
    <a style="text-decoration:'none';padding-top:'5px';"

    <!-- jsx : object형태로 변경할 때는 dash(-)를 사용할 수 없음. camel case로 바꿔줘야햔다--> 
    <div style={{textDecoration:'none', paddingTop:'5px'}}/>

 

---

근데 udemy 강의에서 제공하는 영어 자막은 음성인식으로 얻은 영어자막를 그냥 냅따 한국어로 바꿔버리는데여

어케 jsx를 이렇게 알아들었을까..? 

네? around 뭐라구여?

한국어 자막으로 변경하면..

 

갑자기 집중력이 흐려지기 시작햇다