<h1>#1. 리액트를 배우기 위한 사전 준비</h1><h3>#챕터 목차</h3><ol class="tight" data-tight="true"><li><p>JSX 구문</p></li><li><p>Imperative &amp; Declarative</p></li><li><p>v = f ( s )</p></li><li><p>ES5/ ES6 functions and literals</p></li></ol><h2>JSX 구문</h2><p>JSX 는 Javascript 와 XML 을 합성한 표현방식입니다.</p><p>React 에서는 JSX 구문을 주로 사용하게 됩니다.</p><pre spellcheck="false"><code class="language-jsx">// JSX 의 예제 코드
const name = 'John Doe';
const element = &lt;h1&gt;Hello, {name}&lt;/h1&gt;;

// JS 의 예제 코드
const element = React.createElement(
  'h1',
  null,
  `Hello, ${name}`
);
</code></pre><pre spellcheck="false"><code class="language-jsx">// 함수형 컴포넌트 내에서의 사용예
  return(	
      {state === "loading" ? (
        "Loading"
      ) : (
        &lt;ul&gt;
          {todos.map((todo) =&gt; (
            &lt;TodoItem77 key={todo.id} {...todo} /&gt;
          ))}
        &lt;/ul&gt;
      )}
  )
</code></pre><p>JSX 심화 학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html">https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html</a></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://ko.legacy.reactjs.org/docs/jsx-in-depth.html">https://ko.legacy.reactjs.org/docs/jsx-in-depth.html</a></p><h2>Imperative vs. Declarative</h2><p>프로그래밍에서 해결해야 할 과제 “AAA” 가 있다고 가정하겠습니다.</p><p>절차형/명령형 imperative 프로그래밍에서는 “AAA” 의 모든 속성과 과제 들을 데스크탑 위에 모두 풀어헤쳐 놓고 하나하나의 세부항목 태스크를 구성한 후, 각각의 태스크에 대한 코드들을 구성해준 뒤 전체 플로우를 연결해줍니다.</p><pre spellcheck="false"><code class="language-jsx">// Imperative
// 배열에서 짝수를 찾고 그 합을 계산한다.
const numbers = [1, 2, 3, 4, 5, 6];
let sum = 0;

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

console.log(sum); // 12
// 모든 절차가 마치 익숙한 의식의 흐름처럼 진행되었습니다.
</code></pre><p>반면에 선언형 declarative 프로그래밍에서는, 추상화 된 처리 엔진(또는 규칙) 을 전제로 합니다.</p><p>그리고 그 엔진이 watch/listen 하고있는 ‘개별 상태’ 를 변경 또는 관리의 목표로 설정해 줌으로서 태스크가 해결됩니다.</p><pre spellcheck="false"><code class="language-jsx">// Declarative
// 새로운 greet 객체를 출력에 반영시킨다.
const [activeGreet, setActiveGreet] = setState(null)
const newGreet = ['greetings', '안녕']
setActiveGreet(newGreet)
return (
	{
		activeGreet &amp;&amp; (
			activeGreet.map( (eachGreet, i) =&gt; {
	      &lt;Greet key={i} greet={eachGreet } /&gt;
			}	     
    )
	}
)
// 모든 코드의 중심과 목표는 'activeGreet' 라는 상태-state 에 집중되어 있습니다.
</code></pre><h2>v = f ( s )</h2><p>view = function ( state )</p><p>선언형 프로그래밍에서는 처리해야 할 ‘상태’ 즉, state 에 집중하고, state 를 변화 시키면 화면의 출력 양태가 바뀌도록 프로그래밍 합니다.</p><p>이 점이 가장 큰 변화이고 익숙해지기 어려운 문제인데요.. 기존의 절차형 프로그래밍으로부터의 패러다임 전환이기 때문에, 적응하기가 쉽지는 않습니다. 습관처럼 for 문을 적게 되기도 하죠. 언제나 그랬던 것 처럼, 직접 수 만 라인의 코드를 짜보는 것 외에는 왕도가 없는 것 같습니다.</p><p>아무튼, 기억해두시기 바랍니다. 모든 것은 state 이고, 개발자는 state 에 집중해야 한다… 라는 것이 리액트의 가장 큰 지혜이자 중심 컨셉입니다.</p><h2>ES5/ES6 functions &amp; literals</h2><p>리액트 에서는 ECMA5/6 에서 도입된 펑션과 리터럴이 자주 사용됩니다. 거의 모든 리액트 컴포넌트에서 사용된다고도 말할 수 있겠습니다.</p><p>ES5/6 펑션과 표현에 익숙해지셔야 합니다.</p><pre spellcheck="false"><code class="language-jsx">// ES5/ES6 펑션의 예 
  setAllTodos(allTodos.filter((eachTodo) =&gt; eachTodo.id !== targetTodoId));
  return(
      &lt;ul&gt;
        {todos.map((todo) =&gt; (
          &lt;TodoItem key={todo.id} {...todo} /&gt;
        ))}
      &lt;/ul&gt;
  )
</code></pre><p>가장 자주, 유용하게 사용되는 ES5/ES6 펑션들은 다음과 같습니다.</p><h3><a target="_blank" rel="noopener noreferrer nofollow" href="http://Array.map">Array.map</a></h3><pre spellcheck="false"><code class="language-jsx">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) =&gt; val*2 );
</code></pre><h3>Array.filter</h3><pre spellcheck="false"><code class="language-jsx">var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  return value &gt; 18;
}
// arrow function ver.
const numbers2 = numbers1.filter( (val) =&gt; val &gt; 18 );
</code></pre><h3>Array.reduce</h3><pre spellcheck="false"><code class="language-jsx">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) =&gt; total + value, 0);
</code></pre><h3>Arrow function</h3><pre spellcheck="false"><code class="language-jsx">// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) =&gt; x * y;
</code></pre><h3>Optional chaining</h3><pre spellcheck="false"><code class="language-jsx">const user = {
  name: 'John',
  greet: function() {
    return 'Hello!';
  }
};

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

// Optional chaining을 사용한 경우
const greet2 = user?.greet?.();
console.log(greet2); // 'Hello!'
</code></pre><p>ES5/ES6 Functions 심화학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.w3schools.com/js/js_es5.asp">https://www.w3schools.com/js/js_es5.asp</a></p><h3>Destructuring assignment : 구조 분해 할당</h3><pre spellcheck="false"><code class="language-jsx">// 기본 분해 할당
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

</code></pre><p>Destructuring assignment 심화학습 Ref :</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment</a></p><h3><strong>Nullish Coalescing Operator 와 Logical OR Operator</strong></h3><pre spellcheck="false"><code class="language-jsx">
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 값을 검사합니다.

</code></pre><p>여기까지가 React 에서 주로 사용되는 구문과 펑션.. 등에 대한 사전 지식 점검 이었습니다.</p><p>충분히 이해하셨다면, 다음 장에서 본격적으로 React App 을 생성하고, 코딩을 시작해 봅시다.</p>

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