1. 리액트의 기본 사용법

• jsx의 기본형식:

///예시: 여러 가지 형태의 변수 사용 가능성 및 사용예시
let text = "hello, world!";

const num = 15;// const obj = {key: 0, a: 1, b: 2};
    //object는 jsx에서 사용 불가
    const arr = ['a', "b", "c"];

const imageUrl =
    "https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg";

function App (){

    return (

<div className={"new"}>

    <h1>변수 넣기</h1>

    <ul>

        <li>{text}</li>

        <li>{text + 'test'}</li>

    </ul>

    <h1>숫자 및 계산식 넣기</h1>

    <ul>

        <li>{num}</li>

        <li>{num + 10}</li>

    </ul>

    <h1>Boolean, Nullish 값 넣기</h1>

    <ul>

        <li>{true}</li>

        <li>{false}</li>

        <li>{undefined}</li>

        <li>{null}</li>

    </ul>

    <h1>Object, array 넣기</h1>

    <ul>

        {/*<li>{obj}</li>*/}

        <li>{arr}</li>

        <li>{[<div>hello</div>, <div>you</div>]}</li>

    </ul>

    <h1>주석 넣기</h1>

    <ul>

        <li></li>

    </ul>

    <h1>주석 속석에 넣기</h1>

    <img src={imageUrl} alt='logo'/>

</div>

    );

}
export default App;

형태와 같이, java + HTML의 형태를 구사하고 있다.

마지막 줄의 ‘export default App;’이라는 구문을 통해 App함수를 추출하고, 메인 렌더링을 담당하는 index.js를 비롯한 다른 여러 component 소스들에서 이 App함수를 import하여 사용할 수 있게 해준다.

2. if문과 반복문

1. 조건문
   • 삼항연산자: {조건 ? 조건이 참일 때 return값 : 조건이 거짓일 때 return값}의 형태.
   • or문: {조건 || 조건이 거짓일 때 return값}의 형태.
   • And문: {조건 && 조건이 참일 때 return값}의 형태.
   • if문: {(()=>{ if (조건) return '조건이 참일 때 return값'; else return '조건이 거짓일 때 return값'; })()}의 형태로 컴포넌트 내에서 사용 가능.
     

function App (){
    return (
const arr = [1, 2, 3];

const text = '';

function App (){    return (

<div className={"ifMoon"}>

    <h1>삼항연산자</h1>

    <ul>

        <li>{1 + 1 === 2

            ? '참입니다'    //true일때

            : '거짓입니다'   //false일때

        }

        </li>

    </ul>

    <h1>And 연산자</h1>

    <ul>

        <li>

            {1 + 1 === 2 && 'And 연산자 1'}

        {/*만일 && 앞의 값이 true일 경우, 뒤의 값을 리턴. 그렇지 않은 경우 리턴하지 않음*/}

        </li>

        <li>

            {arr.length && 'And 연산자 2'}

        </li>

    </ul>

    <h1>Or 연산자</h1>

    <ul>

        <li>

            {1 + 1 !== 2 || 'Or 연산자 1'}

        </li>

        {/*만일 || 앞의 값이 false일 경우, 뒤의 값을 리턴. 앞의 값이 True인 경우 리턴하지 않음*/}

        <li>

            {text || 'Or 연산자 2'}

        </li>

    </ul>

    <h1>IF문</h1>

    <ul>

        <li>

            {(()=>{

                if (1+1!==2) return 'IF';

                else return 'ELse';

            })()}

        </li>

        <li>

            {(()=>{

                const data = '조건실행함수';

            //     어떤 연산이든 추가가 가능하다.

                return data;

            })()}

        </li>

    </ul>

</div>

    );

}
export default App;

• 반복문
  • java의 그것과 같은 형태로 사용.
  • mapping을 통해 반복적인 출력이 가능함.

const arr = ['1번', '2번', '3번', '3번'];
const arr2 = [];
for (let i = 0; i < arr.length; i++){
    arr2.push(<h4 key={i}>{arr[i]}</h4>);   //arr의 길이만큼 반복해서 <h4>로 넣어주기.
}

function App (){

    return (
            <div>
            <h1>배열로 넣기</h1>
            <ul>
                <li>{arr}</li>
                <li>{arr2}</li>
            </ul>

            <hr/>

            <h1>Array.map</h1>
            <ul>
                <li>
	                  {arr.map((item, index) => {  //map((item, index) => {})의 형식을 이용
																                  //하여 데이터를 index(순서)에 맞게 출력.
                    return <h4 key ={item}>{item}</h4>;
                })}</li>
            </ul>
        </div>
     );
}
export default App;

• CSS

import './App.css';
function App (){
    return (
        <div
            style={
                {
                    position: 'relative', width: 400, height: 1000, background: '#f1f1f1'
                }
            }
        >
            <div style={roundBoxStyle}>Hello1</div>
            <div style={{...roundBoxStyle, top: 350}}>
                <div className={"highLight"}>Hello2</div>
            {/*className을 이용해서 .css의 스타일을 가져오기 --> 굳이 쓸 필요가 있나...*/}
            </div>

            <div style={{...roundBoxStyle, top: 650}}>
                <div className={
                    1 + 1 === 2 ? 'highLight' : ''
                }>
                Hello3
                </div>
            </div>
        </div>

3. 활용예제: 구구단

• 조건문, 반복문, css를 활용하여 구구단 표 만들어 보기

//조건: 2단부터 9단까지의 구구단을 작성하되, 1단과 5단은 제외하고, 짝수는 blue/홀수는
// black으로 작성하기
import './App.css';

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function App (){

    return (
        <div style={{display: 'flex'}}>
            {num.map(
                (n) =>
                    n >= 2 && n !== 5 && (<div style={{padding:10, color: n%2
                     ? 'blue' : 'black'}}>
                            {num.map((m) => (
                                <div>
                                    {n} x {m} = {n * m}
                                </div>
                            ))}
                        </div>
                    )
            )}
        </div>
    );
}
export default App;