개발/React 검색 결과

해당 글 10건

this.setState

this.setState는 async , 비동기로 작동한다. test = () => { let num = 5; console.log(num); this.setState({ num: num - 1; }); console.log(num); } 위와 같을 경우 콘솔에는 5, 4가 찍히지 않을것이다. setState는 비동기이므로 setState()를 실행하고 완료를 기다리지 않고 바로 console.log()를 수행한다. setState는 state를 변화시키고 렌더링을 하는데 콜백함수를 추가해주면 콜백함수 실행 된 후 리렌더링을 한다. test = () => { let num = 5; console.log(num); this.setState({ num: num - 1; }, () => { console.lo..
개발/React 2019. 7. 3. 16:55

Redux

state를 관리해주는 도구로 단일 스토어를 사용한다. react에서는 props를 이용해서 하위 컴포넌트로 데이터를 계속 넘겨줘야한다. 노드의 깊이가 깊어질수록 복잡도가 높아지고 비효율을 발생시킴. Redux의 데이터 교류 단방향 데이터 디자인 패턴인 Flux를 변형시켰음. 시스템이 action을 받았을 경우 dispatcher가 action들을 관리하여 단일 store의 state를 업데이트. 변동된 데이터가 있다면 view 리렌더링. view에서도 dispatcher로 action을 보낼 수 있음. dispatcher와 action을 이용하면 props를 이용해서 컴포넌트를 단계별로 거치지 않아도 데이터 관리가 가능해짐. action -> dispatch -> reducer -> store upda..
개발/React 2019. 6. 26. 17:40

Reducer

store는 커다란 JSON의 결정체로 상태는 기본적으로 store에서 집중관리한다. { session: { ... }, timeline: { ... }, notification: { ... } } 이 store 와 store에 존재하는 state는 신성한 존재이다. 감히 react component 따위는 범접할 수 없는.. 그렇기에 component가 store(state)와 닿기위해서는 action이라는 신성한 의식을 거쳐야한다. 그럼 action을 하면 store(state)와 바로 닿을 수 있느냐?! 그건 또 아니다. 신성한 store 영역을 지키는 문지기가 있는데 그것이 바로 reducer 인것. 그렇다면 component를 store(state)에 닿게하는 신성한 의식인 action은 어떻게..
개발/React 2019. 6. 25. 13:05

JSX

const element = Hello, world!;​ Javascript를 확장한 문법. JSX는 React element를 생성한다. React는 마크업파일과 로직을 분리하는 대신 둘 다 포함하는 컴포넌트 라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX에 표현식 포함하기 const name = 'Hari'; const element = Hello, {name}; ReactDOM.render( element, document.getElementById('root') ); JSX의 중괄호 안에는 유효한 모든 Javascript 표현식을 넣을 수 있다. 즉, {name} 처럼 변수만 넣을 수도 있고 {2 + 2}처럼 수식을 넣을수도 있고 {user.id} 처럼 객체의 프로퍼티값을 넣을 수도 있고..
개발/React 2019. 6. 22. 18:29

Actions

dispatcher는 action을 호출해 데이터를 불러오고 store로 전달할 수 있도록 메소드를 제공. src > actions > TodoActions.js > updateText(todoId, newText) 이 메소드는 view의 이벤트 핸들러에서 호출해야 실행할 수 있고 그 결과로 사용자 요청에 응답할 수 있다. 이 action creator 메소드는 type을 추가할 수 있다. type을 이용해 action이 store에서 해석될 수 있고 적절한 응답이 가능하도록 한다.
개발/React 2019. 6. 21. 17:21

Views와 Controller-Views

React는 조화롭고 자유로운 형태로 다시 렌더링 할 수 있는 view를 view레이어로 제공한다. controller-view store에 의해 이벤트를 중계할 수 있는 특별한 종류의 view store에서 데이터를 얻을 수 있는 glue code를 제공함. 데이터를 위계대로 자식들에게 전달하도록 돕는다. 페이지의 광범위한 영역을 관리하는 controller-view store에게 이벤트를 받으면 store의 퍼블릭 getter 메소드를 통해 새로 필요한 데이터를 처음으로 요청. 그 과정에서 setState() or forceUpdate() 호출. 그 호출 과정에서 자체의 render() 메소드와 하위 모든 자식의 render() 메소드를 실행. store의 전체상태를 단일 객체로 만들어 하위 view..
개발/React 2019. 6. 21. 17:09

Stores

store는 어플리케이션의 상태와 로직을 포함하고 있다. 전통적인 MVC의 모델과 비슷한 역할이지만 많은 객체의 상태를 관리할 수 있음. 단순히 객체 컬렉션을 관리하는 것을 넘어 어플리케이션 내의 개별적인 도메인에서 어플리케이션의 상태를 관리한다. (개별적 도메인이라는 건 각 페이지의 url을 말하는 건가??...) ImageStore는 이미지 콜렉션을 지속적으로 추적 TodoStore는 할 일 항목의 콜렉션을 관리. store는 자신을 dispatcher에 등록하고 callback을 제공. 이 callback은 action을 파라미터로 받는다. store에 등록된 callback 내부에서는 switch문을 사용한 action 타입을 활용해서 action을 해석하고 store내부 메소드에 적절하게 연결될..
개발/React 2019. 6. 21. 16:21

Dispatcher

역시 이 부분도 가볍게 읽고 넘어가는 부분.. 다 이해하려하지말것. 반복해서 비슷한 내용들을 보다보면 어느순간 이해가 되겠지... 단일 dispatcher dispatcher는 Flux 어플리케이션의 중앙 허브로 모든 데이터의 흐름을 관리한다. store의 콜백을 등록 action을 store에 배분 각각의 store에 직접 등록하고 콜백을 제공. action creator가 새로운 action이 있다고 dispatcher에게 알려주면 어플리케이션에 있는 모든 store는 해당 action을 앞서 등록한 callback으로 전달받는다. 어플리케이션 규모가 커지면 dispatcher의 역할은 더욱 필수적 store간에 의존성을 특정적인 순서로 callback을 실행하는 과정으로 관리하기 때문. store는..
개발/React 2019. 6. 21. 14:44