24.08.20 지금까지 배운 React 요약

JSX

JavaScript에서 XML을 추가한 확장한 문법

 

JSX에서 지켜야할 문법

1. JSX 파일 하나에는 한개의 function 

2. return타입에 들어가는 태그는 최상위 태그는 하나

• <Fragment></Fragment> 혹은 <></> 사용 가능

3. 자바스크립트 표현식은 JSX내부에서 {}로 감싸주기

4. 복잡한 자바스크립트 로직은 사용이 불가능, 간단한 로직만 표현식에 사용 가능 

• 복잡한 로직의 경우 JSX 밖으로 빼서 함수로 별도로 정의해서 해당 표현식에서 해당 함수를 불러오는 방법 사용!
• 로직이 여러 줄일 경우 표현식 내에서 ()로 묶어서 출력 가능
  • {조건문 && (
    <div>
    <h1></h1>
    <p></p>
    </div>)}

5.  속성 및 스타일 등은 camelCase , 컴포넌트의 이름은 PascalCase

• JavaScript과 혼동될 것 같은 경우 React 자체에 대체문법을 사용한다.
  • class -> className
  • innerHTML -> dangerouslySetInnerHTML
  • for -> htmlFor  // <label>의 for속성
  • onchange, onclick ... -> onChange, onClick 
    
    

JSX 이벤트 처리

JSX의 이벤트에 파라미터를 넣어 전달하고 싶을 경우에는 arrow 함수 안에 넣어서 간접적으로 호출해야 한다. arrow함수를 사용하지 않으면 함수가 바로 시행된다. 

 

• const func1 = (str) => {
  alert(str)
  };
  
  return(
  <button onClick = { () => func1("안녕")}></button>
  )

 

JSX 이벤트 종류

종류	설명
onClick	요소를 클릭했을 때 발생하는 이벤트
onChange	입력 필드의 값이 변경되었을 때 발생하는 이벤트
onSubmit	폼이 제출되었을 때 발생하는 이벤트
onMouseOver	마우스가 요소 위로 이동했을 때 발생하는 이벤트
onMouseOut	마우스가 요소 밖으로 이동했을 때 발생하는 이벤트
onKeyDown	키보드의 키를 눌렀을 때 발생하는 이벤트
onLoad	페이지나 이미지 등이 완전히 로드되었을 때 발생하는 이벤트

 

state

컴포넌트에서 이용할 수 있는 상태값

값이 바뀔 때마다 표시되는 내용이 변경된다 (양방향 바인딩), 값에 대한 동기화를 위해 사용

• import {useState} from 'react';
  useState를 활용하기 전에 react 모듈에서 useState를 불러온다. 
  
  
• const[데이터, 데이터변경함수] = useState(초기값);
  - 데이터 : 현재 상태 변수를 나타낸다.
  - 데이터변경함수 : 데이터를 다른 값으로 업데이트하고 재렌더링을 해주는 함수이다. 
                                 값 / 함수를 넣을 수 있고 함수가 들어갈 경우에 반드시 return이 들어가야함.
  - 초기값 : 데이터의 초기 설정값으로, 이 인수는 초기 렌더링 이후에 무시된다.

 

객체 / 배열 사용

primitive type의 경우 값이 변경되었을 경우 렌더링이 발생되고, non-primitive type의 경우에는 참조하는 주소(메모리주소)가 변경 되었을 때 렌더링이 발생된다. (초기값의 불변성) 

 

객체의 형태는 유지하고 참조하는 주소만 변경하고 싶다면 구조분해할당을 사용하면 된다. spread 연산자를 사용하여 객체/배열을 해체해서 그 값을 새로운 객체/배열로 전달 받게 되면 참조하는 주소가 변경하게 된다.

 

배열 렌더링

어느 부분이 수정되어야 하는가 , 어느 부분이 삭제되어야 하는가 등의 조건이 필요하다. Array에서 제공하고 있는 JavaScript 배열 메서드를 사용하여 가능하다 ! map()으로 배열 렌더링할 때, 엘리먼트에 안정적인 고유성을 부여하기 위해 key를 지정해야 한다. key의 경우 index 값도 사용할 수 있지만, 서버에서 오는 고유한 값을 key값으로 사용하는 것이 좋다.

	메서드
추가	concat, [...arr] * spread연산자
제거	filter, slice
교체	map (replacing, listing에서 사용 가능)
정렬	배열을 복사한 이후 reverse() 및 sort()함수 사용  --> reverse()와 sort()만 쓰면 주소값 변경X

component 

객체의 독립성을 유지시키기 위해 각각에 화면에 들어가는 패널, 카드, 아이템 단위로 쪼개서 사용하는 단위 객체를 의미함

컴포넌트는 독립성을 가지고 있어야함. 컴포넌트의 이름은 PascalCase, 한 컴포넌트 안에는 하나의 컴포넌트만 담고 있어야 함. 파일의 이름과 컴포넌트 이름을 동기화 시키는 것을 권장한다. 

prop

상위 컴포넌트에서 하위 컴포넌트에 값을 전달할 때 사용한다. 어떤 값이든 간에 prop로 전달하여 사용이 가능하다 (함수, 객체 전부 가능). 프로퍼티(props)는 불변성을 가지고 있어서, 하위 컴포넌트 객체의 경우 props를 수정할 수 없다. 프로퍼티에 문자열을 전달할때는 큰따옴표(" ")를, 문자열 외의 값을 전달할때는 중괄호({ })를 사용한다. 문자열의 방식의 경우 string으로 값을 받게 되고, {}로 받게 되는 경우 여러가지 형태로 값을 받아서 사용이 가능하다. 

 

CSS

CSS 적용 방법

• 인라인(inline)  적용
• CSS styling 작성후 Component에서 css파일 import
• css-module 사용

인라인적용 

태그에 바로 사용하는 방식, 값이 인라인 그대로 적용하기 때문에 외부에서 변경하려고 해도 스타일이 변경되지 않는다. 스타일의 유동적인 조작이 어렵다.

• <h1 style={{ backgroundColor: "yellow", color: "brown" }} className="cls1">인라인 디자인</h1>

CSS파일 import 

별도의 파일을 정의한 후에 import하여 스타일 적용한다. 해당 디자인이 관련 컴포넌트에만 영향을 끼치는 것이 아니라, 상위 및 하위 컴포넌트에도 영향을 끼친다. 객체의 독립성이 유지되지 않는다.

CSS-module

연계되거나 태그와 태그의 조합, 이벤트 조합 등의 경우에는 CSS-module을 사용하기 어렵다.

• 컴포넌트의 최상단 CSS 클래스는 컴포넌트의 이름과 일치시킨다.
  • import style from './Comp1.module.css'; 
  • function Comp1(){
    return(
    <h1 className = {style.color}></h1> 
    );
    }
• 컴포넌트 내부에서 보여지는 CSS 클래스는 CSS Selector 를 잘 활용한다. (ex ) style.color )
• 가급적이면 자식접근자나 자손접근자등 클래스를 많이사용하기보다 접근자를 활용하는 것을 추천.