React 기본

1. react는 여러가지 component를 가지고 있고 각 component가 한개 또는 여러개의 기능을 가지고있다.

2. component에는 함수형 component가 있고 첫글자는 대문자로 시작해야한다.

3. React에서 css 사용하는 법
   
   1) inline css 사용하기

   • css파일을 따로작성할 필요없이 html태그에 적는 것이다.
   • 하지만, 특별한 경우가 아니고서는 잘 사용하지 않는다.

   2) App.css, index.css 활용하기

   • index.css는 전체 프로젝트에 영향을 미친다.
   • App.css app 관련된것만 영향을 미칠거 같지만 전체에 영향을 미친다.

   3) css module 사용하기

   • 파일명을 적고 .module.css 라고 적는다.
   • 가장 많이 사용하는 방법이고, 동일한 name으로 작성되어도 중복될 일이 없다.
   • 글로벌단위로 관리되는것이 아니라 component 단위로 관리 되기때문에 관리하기가 편리하다.

4. 이벤트 처리 방법

• 미리 함수를 하나 만들어서 사용하기.

export default function Hello(){
    function ShowName(){
        console.log("mike");
    }
    return (
        <div>   
            <h1>Hello</h1>
            <World />
            <button onClick={ShowName}>Show name</button>
        </div>
    );
}

--function ShowName(){} 이라는 함수를 만들어서 onClick={} 안에 ShowName(함수명)을 적어주면 된다. 이러면 콘솔창에 mike가 뜨는걸 확인할 수 있다.

• 내부에 직접 함수를 작성하기.

   export default function Hello(){
     return (
         <div>   
             <h1>Hello</h1>
             <World />
             <button onClick={()=>{
                 console.log("mike")
             }}>Show name</button>
         </div>
     );
  }

-- <button onClick={()=>{ console.log("mike") }}>Show name</button>안에 직접 함수를 작성하여 불러오는 방법이다. 이렇게 만들어도 버튼을 클릭하면 console 창에 mike가 표시된다. --> 이 방법의 장점은 매개변수를 전달하기 편하다는 것이다.

출처 : 유뷰브 코딩앙마