youngmin.log

spread

ES6 에서 도입된 문법이다.

• "펼치다","퍼뜨리다" 라는 뜻의 spread
• 이 문법을 사용하면, 객체 or 배열을 펼칠(?)수 있다. ( "새로운 복제" 정도로 이해했다. )
• 기존의 객체 or 배열을 건드리지 않고, 새로운 객체 or 배열을 만들고, 거기에 추가적인 작업이 들어가는 것

React 에서, spread 문법을 쓸 일이 많아서, 한 번 정리하고 가야 될 것 같아서, 정리해봤다.

1. Array.map( )

• map : 배열 안의 각 원소를 변환 할 때 사용. 새로운 배열을 만든다.

2. Array.filter( )

• filter : 배열에서 특정 조건을 만족하는 값들만 따로 추출해서 새로운 배열을 만든다.

3. Array.forEach( )

• forEach : 배열이 있을 때, for문 대신, 배열전체에 대해서 작업시 편리

4. Array.indexOf( )

• indexOf : 기본자료형(숫자,문자(문자열), Boolean)들의 배열의 경우, 찾는 값이 존재하는, 배열의 인덱스 반환

5. Array.findIndex( )

• findIndex : 배열 안에, 요소들이 배열 or 객체일때, 해당 조건을 만족하는 요소의 인덱스 반환

6. Array.find( )

• find : findIndex랑 비슷한데, 찾아낸 값이 인덱스가 아니라, 값 자체를 반환

7. Array.concat( )

• concat : arr1, arr2 가 있을 때, 두 배열에 변화를 주지않고, 두 배열을 합친 결과를 반환

8. Array.reduce( )

• reduce : 두개의 파라미터를 전달한다. ( 1. 콜백함수, 2. reduce함수에서 사용 할 초기값 )
• 어떤 상황에서 사용 ?
  • 가장 간단한 예 = (정수)배열 내 원소의 값들의 합을 구하기
  • 배열 원소의 합을 구하는 방법은 여러 개가 있을 수 있다. ( forEach, 그냥 for문 돌리면서.. 등등 )
  • 다만, reduce 함수를 사용시, 이런 비슷한 작업을 할 때 유용

📝 컴포넌트

컴포넌트(Component) : 앱의 기능을 단위별로 캡슐화하는 React의 기본 단위

HTML 요소를 반환하는 함수나 클래스와 같다고 생각해도 된다.
따라서, 컴포넌트는 독립적이고, 재사용 가능한 코드의 조각이다.

컴포넌트의 종류로는, 1. 함수형 컴포넌트, 2. 클래스형 컴포넌트가 있다.

💡 함수형 컴포넌트

간단한 예로, 함수형 컴포넌트 형태를 보자.

function Introduce() {
  return <h2>Hi, I am elice!</h2>;
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

💡 클래스형 컴포넌트

함수형 컴포넌트와 비교했을 때, 약간 구조만 다른 정도다.
다만, class 선언 시, React.Component의 메소드들을 사용하기 위해, extends를 이용해, React.Component를 상속
render( ) 함수안에, 반환 할, HTML 요소를 return 으로 반환
간단한 예로, 클래스형 컴포넌트 형태를 보자.

class Introduce extends React.Component {
  render() {
    return <h2>Hi, I am elice!</h2>;
  }
}

ReactDOM.render(<Introduce />, document.getElementById('root'));

💡 이 둘은 각각, 언제 사용하는가 ?

함수형 컴포넌트

• 단순히 HTML UI를 반환하는 간단한 자바스크립트 함수로 자주 사용한다.
• 단순히, 데이터를 받고, 렌더링 하면 끝이지 때문에, 비상태형 컴포넌트라고도 한다.

클래스 컴포넌트

• 클래스 컴포넌트는, "상태(State)"를 구현할 때 사용한다.
• 여기서, "상태(State)"란, React의 State를 의미하며, 쉽게 말하면, 컴포넌트의 현재 저장된 값
• 이런, "상타(State)"를 가지는, 클래스 컴포넌트를, 다른 말로, 상태형 컴포넌트라고도 한다.
• HTML을 반환하는 render( ) 메소드가 구현되어, 복잡한 UI 로직을 구현할 때 클래스형 컴포넌트를 사용한다.
• 특히, State를 사용할 때, 반드시(?) 클래스형 컴포넌트로 구현이 되어야 한다.

그러나, 기술이 발달 되면서, 이제는, 사실, 클래스 컴포넌트에서만, 다룰 수 있던, 컴포넌트의 상태(State)를, 함수형 컴포넌트에서도 다룰 수 있게 되었고, 그러한 기술을 우리는, "훅(hook)" 이라고한다.

이것은, 뒤에서 설명하려고 한다. ( 아주 중요하기 때문 ! )

그리고, 요즘은 사실, 클래스형 컴포넌트보단, hook을 이용한, 함수형 컴포넌트로 React를 구현하는 것이 추세라고 한다.