[SeSACX코딩온] React

React란?

- 페이스북에서 만든 오픈소스 자바스크립트 라이브러리
- 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합
- 특징

• 1) DataFlow: 단방향 데이터 흐름
• 2) Component 기반 구조, 여러 UI를 조립해서 화면 구성, 높은 재사용성, 유지보수 용이
• 3) Virtual DOM; 가상 돔, 앱의 효율성과 속도 개선
• 4) Props and State: 부모 -> 자식 데이터, 컴포넌트에서 사용되는 값 변경 기능
• 5) JSX: javascript + xml

사용방법

- node.js에서 패키지의 일환으로 사용가능 (npm)
- npm install create-react-app -g

• 수업에서는 github 폴더에서 설치해서 사용함
  - npx create-react-app 파일이름
• 수업에서는 SSAC_dobong에서 파일만듬
  
  - 생성을 완료하면 cd로 해당 폴더로 이동 후 npm start를 통해 3000 포트 번호로 연결됨
• 수업에서는 사용하지 않는파일은 삭제한 후 작업을 시작하였는데 파일구조는 아래와 같으니 참고, 삭제한 이후 없어진 파일에 대한 import문도 지우고 작업해야 오류가 나지 않음
  

Component

- Class Component: render()함수 사용해야함, 생성 시 기존 Components 클래스에서 상속을 받아야함
- Functional Component: 짧고 직관적, 메모리 사용 이점
- state를 함수형 컴포넌트에서 사용할 수 있게 되면서 현재는 함수형 컴포넌트가 주로 사용되는 추세, 수업에서 클래스 컴포넌트는 형태나 방식을 이해하고 넘어갈 것
- 컴포넌트의 이름은 PascalCase사용한다(반드시)
- 컴포넌트는 app.js파일의 return문에 태그의 형태로 작성하면 import해서 사용할 수 있다. npm start로 열리는 브라우저에서 app.js의 return문에 오는 컴포넌트, html 등을 확인할 수 있다.

JSX

- javascript + xml
1) return문 안의 내용이 한 행일 경우는 상관없지만 두 행 이상일 경우 전체를 감싸는 태그가 반드시 존재해야한다
2) html중간에 js문법을 사용할 경우 {} 중괄호 내부에 작성하면 된다
3) 중괄호안에 if문이나 for문을 사용할 수는 없다. 삼항연산자는 사용가능하다. 사용하려면 return문 위에 js코드를 작성할 수 있다
4) 인라인 style은 dash-case가 아닌 camelCase로 사용되며, {}오브젝트 형태로 사용, 저장(변수로 사용시에도)해야한다
5) class이름은 className으로 사용한다. 이벤트는 onclick (x) onClick(o)의 형태로 사용한다
6) input or br or hr 같은 빈태그도 closing tag가 필요하다. 빈태그의 뒤에 /를 추가하거나 closing tag를 사용해주어야 한다(중간에 글자나 뭔가를 넣으면 안됨)

Props

- 부모가 되는 컴포넌트에서 자식 컴포넌트로 보내는 데이터
- 상위 -> 하위의 방향으로만 전달 가능
- 자식 컴포넌트를 import할 때 태그안에 이름 = "데이터" 형태로 작성하면 자식은 배열로 데이터를 받아 인자.이름으로 접근하여 사용할 수 있다

//부모에서 전달
<Componet1 name="juhee" />
  
//자식이 사용
export function Component1(props) {
  	//juhee가 출력된다
	return <h1>{props.name}</h1>
}

- defaultProps: props를 보내지 않았을 경우 기본값을 설정할 수 있다
- 컴포넌트이름.defaultProps = {props이름: 값} 배열 형태로 설정하며 여러개의 props의 기본값을 설정할 수도 있다

//자식 컴포넌트가 있는 곳에서 설정
Component1.defaultProps = {
	name = "이름",
    age = 10,
}

- props.children: 부모컴포넌트에서 자식컴포넌트를 호출할 때 태그 사이에 작성한 문자열, 무조건 .children이라는 이름으로 가져올 수 있다

//부모에서 전달
<Componet1>이곳이 children</Componet1>
  
//자식이 사용
export function Component1(props) {
  	//이곳이 children이 출력된다
	return <h1>{props.children}</h1>
}

State

- 앱의 유동적인 데이터를 다루기 위한 개체
- State가 변경되면 해당 부분만 재랜더링된다
- const [스테이트이름, 스테이트변경메소드이름] = useState(초기값)의 형태로 사용된다
- 아래는 state를 통해 onClick시 boolean값을 변경하는 함수를 만들고
3항 연산자를 통해 영어 or 한글을 출력하도록하는 component 예시이다

export default function FunctionState() {
  const [isEnglish, setIsEnglish] = useState(true);
  function changeLanguage() {
    // 반대로 변경하도록함
    setIsEnglish(!isEnglish);
  }
  return (
    <div>
      <div className="div" style={{ backgroundColor: "red", color: "white" }}>
        {isEnglish ? "apple" : "사과"}
      </div>
      <button onClick={changeLanguage}>
        {isEnglish ? "한글" : "영어"}로 변경
      </button>
    </div>
  );
}

Event Handling

- Html: <tag onclick="functionName()">
- React: <tag onClick={functionName}>

- React는 camelCase를 사용하며, jsx를 사용해 이벤트 핸들러를 전달하고, 기본 DOM요소에만 이벤트 설정이 가능하다
- 위의 onClick시 실행되는 state변경도 이벤트 실습의 한 예시였다고 볼 수 있다
- 추가실습: select와 input창을 이용하여 데이터 입력시 사진과 데이터를 바로 보이도록 onChange이벤트를 활용한 실습 진행
-> 이미지url, 글자색, 배경색, 글내용을 state로 설정하고 각각의 select와 input요소에 onChange시 작동하는 함수를 연결했다. 그리고 각 함수에 따라 state값이 변경되도록 하였다. img태그의 src값을 urlState와 연결하고 text내용을 담을 div의 배경색, 글자색 css, 그리고 태그 내부의 {text} jsx를 사용하여 아래와 같이 구현했다