ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 리액트 개인 공부 정리 (1)
    Computer Science/React 2019.03.22 14:58


    1. Components


    컴포넌트는 UI의 부분을 묘사한다.


    컴포넌트는 재사용 하기 좋고 다른 컴포넌트들


    안에 중첩될 수 있다.


    컴포넌트에는 두 가지 타입이 있다.


    (1) Stateless Functional Component


    (2) Stateful Class Component


    2. Functional Components


    단지 자바스크립트 함수이다.


    선택적으로 props라고 하는


    property의 object을 받을 수 있고


    UI을 묘사하는 HTML을 반환한다.


    여기서 HTML은 사실상 JSX라고 봐도 된다.


    3. Class Components


    ES6 Class


    Class Component는 props와 별개로


    private한 내적인 상태를 유지할 수 있다.


    쉬운 말로 하자면,


    컴포넌트에 비공개인 일부 정보를


    유지 관리하고 그 정보를 이용하여


    UI을 묘사할 수 있다.


    Functional Components vs Class Components


    함수형 컴포넌트는


    간단한 함수들


    가능한 한 함수형 컴포넌트들을 사용하고


    "this" 키워드에 대한 부재


    state 사용 없는 해결책


    주로 간단한 UI 담당한다.


    Stateless / Dumb / Presentational


    클래스 컴포넌트는


    풍부한 기능을 추가


    컴포넌트들의 사적인 데이터 유지 관리

    (State)


    복잡한 UI 로직 구성


    Lifecycle hooks 제공


    Stateful / Smart / Container


    4. Hooks


    https://reactjs.org/docs/hooks-intro.html


    (공식 문서 확인)


    5. JSX 


    6. Props 


    7. State 


    8. setState 


    9. Destructuring props and state 


    10. Event Handling


    11. Binding Event Handlers


    Event Binding 해야하는 이유는 


    React에 대한 이해가 아닌


    JavaScript에 대한 이해


    어떤 요소가 어떤 이벤트에 


    반응할지 연결해줘야 한다. 


    이것을 바인딩이라고 한다.


    리액트에서 Binding 방법은 여러가지가 있다.


    (1) binding in render


    (2) arrow function in render


    (3) binding in the class constructor


    (4) class property as arrow function


    리액트 공식 문서에서 3번과 4번을 사용한다.


    12. Methods as props


    ParentComponent의 메소드를  


    ChildComponent로 넘겨줄 때 


    props를 활용한다.


    ChildComponent의 파라미터를 


    ParentComponent로 넘겨줄 때 


    Arrow function을 이용하여 넘겨준다.


    13. Conditional Rendering


    (1) if/else


    (2) Element variables 


    변수를 선언하고 변수에 값을 넣어 이용한다.


    (3) Teranary conditional operator 


    (삼항 연산자) ? :


    (4) Short circuit operator 


    (논리 연산자) &&


    주로 3번 혹은 4번을 사용한다.


    14. List Rendering


    Array.prototype.map() 


    map 메서드는 배열 내의 


    모든 요소 각각에 대하여 


    주어진 함수를


    호출한 결과를 모아 


    새로운 배열을 반환한다.


    15. Lists and Keys


    List의 요소들을 만들 때 key를 포함 해야 한다.


    Key는 요소들에게 안정적인 정체성을 부여하고


    리액트가 items들이 추가, 삭제, 변경할 때 식별하도록 도와준다.


    보통 items의 ID를 key prop value로 설정한다.


    이러한 것들이 UI에 효율적 업데이트를 도와준다.


    16. Index as Key Anti-pattern


    index as key 사용 할 때는 


    map 메서드 두 번째 파라미터로 


    index value를 key로서 넘겨주면 된다.


    단, 조건이 있다.


    (1) unique ID를 부여하지 않은 경우  


    (2) 리스트가 정적이고 추가, 삭제, 변경이 없을 경우


    (3) 리스트가 reordered 혹은 filtered 하지 않을 경우

    댓글 0