#1. 리액트를 배우기 위한 사전 준비

#챕터 목차

1. JSX 구문

2. Imperative & Declarative

3. v = f ( s )

4. ES5/ ES6 functions and literals

JSX 구문

JSX 는 Javascript 와 XML 을 합성한 표현방식입니다.

React 에서는 JSX 구문을 주로 사용하게 됩니다.

// JSX 의 예제 코드
const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

// JS 의 예제 코드
const element = React.createElement(
  'h1',
  null,
  `Hello, ${name}`
);

// 함수형 컴포넌트 내에서의 사용예
  return(	
      {state === "loading" ? (
        "Loading"
      ) : (
        <ul>
          {todos.map((todo) => (
            <TodoItem77 key={todo.id} {...todo} />
          ))}
        </ul>
      )}
  )

JSX 심화 학습 Ref :

https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html

https://ko.legacy.reactjs.org/docs/jsx-in-depth.html

Imperative vs. Declarative

프로그래밍에서 해결해야 할 과제 “AAA” 가 있다고 가정하겠습니다.

절차형/명령형 imperative 프로그래밍에서는 “AAA” 의 모든 속성과 과제 들을 데스크탑 위에 모두 풀어헤쳐 놓고 하나하나의 세부항목 태스크를 구성한 후, 각각의 태스크에 대한 코드들을 구성해준 뒤 전체 플로우를 연결해줍니다.

// Imperative
// 배열에서 짝수를 찾고 그 합을 계산한다.
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    sum += numbers[i];
  }
}

console.log(sum); // 12
// 모든 절차가 마치 익숙한 의식의 흐름처럼 진행되었습니다.

반면에 선언형 declarative 프로그래밍에서는, 추상화 된 처리 엔진(또는 규칙) 을 전제로 합니다.

그리고 그 엔진이 watch/listen 하고있는 ‘개별 상태’ 를 변경 또는 관리의 목표로 설정해 줌으로서 태스크가 해결됩니다.

// Declarative
// 새로운 greet 객체를 출력에 반영시킨다.
const [activeGreet, setActiveGreet] = setState(null)
const newGreet = ['greetings', '안녕']
setActiveGreet(newGreet)
return (
	{
		activeGreet && (
			activeGreet.map( (eachGreet, i) => {
	      <Greet key={i} greet={eachGreet } />
			}	     
    )
	}
)
// 모든 코드의 중심과 목표는 'activeGreet' 라는 상태-state 에 집중되어 있습니다.

v = f ( s )

view = function ( state )

선언형 프로그래밍에서는 처리해야 할 ‘상태’ 즉, state 에 집중하고, state 를 변화 시키면 화면의 출력 양태가 바뀌도록 프로그래밍 합니다.

이 점이 가장 큰 변화이고 익숙해지기 어려운 문제인데요.. 기존의 절차형 프로그래밍으로부터의 패러다임 전환이기 때문에, 적응하기가 쉽지는 않습니다. 습관처럼 for 문을 적게 되기도 하죠. 언제나 그랬던 것 처럼, 직접 수 만 라인의 코드를 짜보는 것 외에는 왕도가 없는 것 같습니다.

아무튼, 기억해두시기 바랍니다. 모든 것은 state 이고, 개발자는 state 에 집중해야 한다… 라는 것이 리액트의 가장 큰 지혜이자 중심 컨셉입니다.

ES5/ES6 functions & literals

리액트 에서는 ECMA5/6 에서 도입된 펑션과 리터럴이 자주 사용됩니다. 거의 모든 리액트 컴포넌트에서 사용된다고도 말할 수 있겠습니다.

ES5/6 펑션과 표현에 익숙해지셔야 합니다.

// ES5/ES6 펑션의 예 
  setAllTodos(allTodos.filter((eachTodo) => eachTodo.id !== targetTodoId));
  return(
      <ul>
        {todos.map((todo) => (
          <TodoItem key={todo.id} {...todo} />
        ))}
      </ul>
  )

가장 자주, 유용하게 사용되는 ES5/ES6 펑션들은 다음과 같습니다.

Array.map

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}
// arrow function ver.
const numbers2 = numbers1.map( (val) => val*2 );

Array.filter

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value > 18;
}
// arrow function ver.
const numbers2 = numbers1.filter( (val) => val > 18 );

Array.reduce

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value) {
  return total + value;
}
// arrow function ver.
const numbers2 = numbers1.reduce((total, value) => total + value, 0);

Arrow function

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Optional chaining

const user = {
  name: 'John',
  greet: function() {
    return 'Hello!';
  }
};

// Optional chaining을 사용하지 않은 경우
const greet1 = user && user.greet && user.greet();
console.log(greet1); // 'Hello!'

// Optional chaining을 사용한 경우
const greet2 = user?.greet?.();
console.log(greet2); // 'Hello!'

ES5/ES6 Functions 심화학습 Ref :

https://www.w3schools.com/js/js_es5.asp

Destructuring assignment : 구조 분해 할당

// 기본 분해 할당
let a, b, rest;
[a, b] = [10, 20];

console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // Array [30, 40, 50]

// 객체 구조 분해 할당
const person = {
  name: 'John Doe',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};

// 객체에서 값을 분해하여 변수에 할당
const { name, age } = person;

console.log(name); // John Doe
console.log(age); // 30

// 중첩된 객체의 속성을 분해하여 할당
const { address: { city, zip } } = person;

console.log(city); // New York
console.log(zip); // 10001

Destructuring assignment 심화학습 Ref :

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Nullish Coalescing Operator 와 Logical OR Operator

let name = "";
let text = "default";
let result;

// Nullish coalising
result = name ?? text;
console.log(result); // ""

// Logical OR operator
result = name || text;
console.log(result); // "default"

// Falsy 값 처리: 
// ?? 연산자는 null이나 undefined만을 검사하고, 
// || 연산자는 모든 falsy 값을 검사합니다.

여기까지가 React 에서 주로 사용되는 구문과 펑션.. 등에 대한 사전 지식 점검 이었습니다.

충분히 이해하셨다면, 다음 장에서 본격적으로 React App 을 생성하고, 코딩을 시작해 봅시다.