React 리액트 기초 (jsx파일, 컴포넌트, 함수 자동완성 라이브러리 ES7+)

JSX(JavaScript XML)

- react 컴포넌트를 정의하는 데 사용되는 js 파일로 XML형식의 값을 반환해준다. 

- 자바스크립트 변수를 HTML 요소에 바인딩할 수 있고, 조건부 렌더링이나 반복문을 사용할 수 있다.

- jsx파일을 통해 컴포넌트를 생성할 수 있다. 이를 통해 효율을 높이고 코드를 간결하게 관리할 수 있다.

**컴포넌트는 일종의 UI조각이다.

 

   public 폴더 

 index.html - 브라우저가 가장 먼저 실행하는 파일

 

   src 폴더 

 index.js -  react 렌더링 정의 하는 코드 작성 -> index.html파일에 로딩됨 (id= root는 dom의 최상위 노드이다.)

 app.js  - index.js에서 기본으로 렌더링 하는 파일 , <React.StrictMode> 태그 안에 작성해준다.

 

** index.js의 <React.StrictMode> 안에는 컴포넌트를 태그 형태로 정의할 수 있으며 작성 시 자동으로 import 된다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

1)  컴포넌트는 src에서 관리한다

2) 함수 생성은 js 또는 jsx파일에서 해준다(jsx가 더 명확한 명칭)

※  함수 생성 후 export 해줘야 다른 jsx(또는 js) 파일에서 import로 가져와 사용할 수 있다.

export default 함수명

 

📌  함수 자동완성 라이브러리  - VScode의 확장에서 설치

라이브러리를 설치 후 jsx 컴포넌트 파일에서 rafce를 입력한 뒤 Tap키를 누르면 아래와 같이 함수가 자동으로 완성된다.

* rafce ( react arrow function component export)

  함수 작성법 

1. function App( ){ }

2. const App = ( ) => { } 

두 함수는 동일하게 작동되며 2번과 같은 형태를 화살표(arrow) 함수라고 부른다.

//함수 표현식
let sum = function(a,b,c){
	return a+b+c;
}

//화살표 함수
let sum = (a,b,c) => a+b+c;

alert(sum(1,2,3));

//결과는 6

인수 a, b, c를 받아 a+b+c 결과를 반환(return)

** 인수가 하나밖에 없다면 괄호 생략가능, 인수가 없으면 괄호는 생략할 수 없다

let double = a => a*2 let hello = ( ) => alert("안녕");

   jsx문법

- return( ) 안에 작성되는 코드가 jsx문법이다.

- HTML 같은 생김새를 갖고 있지만 실제로는 JavaScript이다.

- 리액트 컴포넌트 파일에서 XML형태로 코드를 작성하면 babel이 jsx를 js로 변환해 준다.

** babel은 자바스크립트의 문법을 확장해 주는 도구로 최신문법을 js로 변환해 주어 이전 브라우저 환경에서도 실행할 수 있게 해 줌.

   jsx -> JavaScript 변환 규칙

• 닫는 태그 필수 ( <input />, <br/> )
• 두 개 이상의 태그는 하나의 태그로 감싸져 있어야 한다.
• <> </> 단순 감싸기용 태그 Fragment 사용 가능 (브라우저 상에서는 출력되지 않는다)
• JSX 내부에 js변수를 사용할 때는 {변수명}으로 작성한다. (변수, 조건식, 연산, 오브젝트 넣을 수 있음)
• 작성한 태그에는 클래스 속성을 class가 아닌 className을 사용한다.
• 주석 {/*내용*/} 형태로 작성
• 같다(equal)는 === 연산자 세 개 사용한다.

{조건문 ? 값 : 값}	삼항연산자로 해당 조건문이 만족하면 첫번째 구문을 , 아니면 콜론 뒤 구문 실행
{조건문 && 값}	조건을 만족할 때만 렌더링한다,
{변수 || 값}	변수가 undefined일 경우에만 값을 도출한다.

  jsx 스타일 적용

1) 태그 직접적용(내부스타일)

<div style = {{width :'500px', margin:'0px auto', backgroundColor:'red'}} >

-> 중괄호 두 개, 카멜표기법, 콤마로 스타일 구분

** 속성값에 숫자만 들어가면 '' (따옴표) 생략 가능, 기본값이 px이다.

 

2) 스타일 변수 생성

const style = { width :'500px', margin:'0px auto,backgroundColor:'red''}

<div style = {style}>

 

-> style 변수에 css속성 값을 담아 style 속성에 적용