웹풀스택 공부 중

React 공식 Hook종류useState간단한 상태 관리 + 자율성 보장useReducer복잡한 상태관리 + 제약적State는 정해진 Action으로만 변경시킬 수 있음상태 업데이트 로직(Reducer)를 Component에서 분리한다복잡한 전이를 한곳에서 관리할 수 있다!Dispatcher (함수 실행기)와 Action(함수 실행에 필요한 Parameter)가 있다Dispatcher에 정해진 Action Type만 호출이 가능하다Dispatch는 상태변경 요청을 호출한다[State, Dispatch] = useReduce 이런식으로 사용한다전역 상태Props Drilling 문제를 해결해준다Props Drilling: 상위 App 부모에서 하위 TC 자식들까지 수직적 상태 전달을 위한 Props가 너..

BindingBinding = View + Model리엑트는 단방향 바인딩이다Model이 변경되면 View가 자동으로 변경된다컴포넌트에서 부모에서 자식으로 값이 아래로만 전달된다View에서 Model을 변경하고 싶다면 Controller를 사용하면 된다!장점:명확한 Model과 View의 책임 분리일관된 데이터 로직잘쓰면 성능 저하없는 DOM Rerender가 가능하다단점:사용자의 HTML에 대한 입력 및 이벤트 발생 시 데이터 감지 코드를 매번 작성해야한다 = setState예시function CustomInput({ value, onChange }) { // 1. value 상태를 통해 input 을 변경하기만 합니다. return }양방향 바인딩?자식이 부모에게 값을 올려주는것이 가능하면 양방향..

IIFE (Immediately Invoked Function Expression) - 즉시 사용 함수함수 정의부 + 함수 호출부를 한줄에 처리하는 방법//기본형태function sum(a,b) { console.log(a+b)}sum(1,2)// IIFE(function sum(a,b){ console.log(a+b)})(1,2)장점:호출 후 바로 삭제 된다함수를 은닉할 수 있다“완전범죄!”그래서 원하지 않는 곳에서 호출하고 싶어도 호출이 불가능하다단점:함수가 메모리에 저장된다특징:정의부와 호출부가 같이 있다첫번째 ( ) 는 정의부두번째 ( ) 는 호출부한번 쓰고 말때도 이런식으로 쓸 수 있다// 기본형태const display = companies.filter((company) => co..

유용한 함수들.map : 하나의 연산을 모든 element에다가 적용할 수 있다array.map((each) => each * 10) 이런식으로 각각의 element에 10을 곱할 수 있다foreach 는?foreach 는 반환값이 없다. 그저 연산을 위함이다.filter : 특정 조건에 따라 표시할지 말지 결정한다array.filter((each) => each.attribute === value)ex.)const filteredBooks = books.filter((book) => book.title.include(keyword)).reduce : element의 수를 순차적으로 줄여가며 값을 만든다필요한것은 두개: 초기값, 단일 element에 대한 연산 함수array.reduce((previou..

ReactReact가 왜 필요한가요?“하나의 이벤트 (단일 데이터 변경)에 다수의 Component가 바뀌어야 하는 필요성이 있어 생기게 되었습니다. 특히 Facebook과 iPhone의 등장으로 더욱 필요성이 커졌습니다.”SPA는 무엇인가?SPA: Single Page Application - 모바일 앱과 비슷한 화변 전환 및 사용성 = 화면 전환간에 끊김이 없다.SPA는 URL이 변경된다면 Network에서 가져오는게 아닌, 직접 rendering을 한다“Web Browser 내 JS를 활용해 동적 페이지 생성”Vue & Angular are frameworks, but why is React a library?React: VDOM 개념으로 DOM을 한번만 조작하고 화면을 render하는 단 하나의 ..

개인적으로 제일 어려워하는 부분이지만 화이팅해보자.CallbackCallback ≠ Asynchronous함수 (= Callback)을 파라미터로 넘겨 (일급 함수), 파라미터를 받은 함수에게 실행권을 넘기는 함수“함수를 Parameter로 넘길때, 실행권한도 같이 넘기는 함수이다”function callback(param1, param2){ console.log(param1 + and + param2)}function caller(callback){ callback(arguments[1], arguments[2]);}caller(callback, "hello", "goodbye");arguments[n] 를 사용해 넘겨줄 수 있다비동기적인 개념이 아니다비동기적 기능을 가지진 않았지만 비동기에..