CodingCredit

React Hook을 배우기 전에, 왜 React Hook을 써야하는지 확실히 짚고 넘어가려고 한다 😆 첫번째, Reuse React Class component 사이에서는 상태와 관련된 로직을 재사용하기 어렵다. props로 넘겨주다보면 코드를 추적하기 어렵고, 레이어로 둘러싸인 래퍼지옥을 볼 가능성이 높다. React Hook? 컴포넌트로부터 상태관련로직을 추상화 할 수 있다. Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있게 해준다. 두번째, 복잡한 컴포넌트에서의 어려운 상태관리 리액트에서 각 생명주기 메서드는 다양한 로직과 섞여있고, 각 상태관련 로직들은 모든 공간에 있기 떄문에, 이러한 컴포넌트들을 모두 작게 쪼개서 관리하는 것은 불가능하다. React Hook? 이것을 해결하기 위해..

fetch로 받아왔을 때 주의점 API에 접근해서 데이터를 받아오는 등의 동기적으로 이루어져야하는 함수는 componentDidMount()에서 실행한다. 이렇게 받은 데이터로 바꾼 state는 네트워크 속도가 아무리 빠르더라도 초기값을 바꾸지는 못하므로 처음렌더됐을때는 변화된 state값을 반영하지 못한다. 따라서 해당 state를 사용하여 렌더할때는, default값을 주어야 TypeError가 뜨지 않는다. class App extends Component { state = { customers: '', }; //일반적으로 API에 접근을해서 데이터를 받아오는 등의 작업은 componentDidMount()에서 한다. //이 함수는 모든 컴포넌트가 마운트 되었을때 실행된다. 라이프사이..

클라이언트-서버 아키텍처를 공부하면서 종종 듣게 되는 REST, REST API, RESTful 에 대해서 정리하고자 한다. 📖 REST (Representational State Transfer) 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 서버-클라이언트 아키텍처에서는, HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. REST의 구성요소 자원(Resource): URI 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다. 자원..

state를 직접 수정하면 안되는 이유. 클래스 컴포넌트에서 state는 setState()를 사용한다. 직접 state를 수정하는 것 즉, this.state.comment = 'Hello' 위 처럼 직접 변경하면 안된다. this.state를 지정할 수 있는 유일한 공간은 constructor이다. 그 이유는 React의 life cycle 때문이다. setState가 호출되면 리액트에서는 "어? 상태가 변했네?" 라고 인식하고 렌더링을 실행한다. (위 그림에서의 업데이트할 때 setState()) 그런데 this.state로 직접 변경하게되면 리액트가 state가 변했다는걸 인지하지 못하고, 렌더링하지 않는다. setState를 사용하는 두가지 방법 setState()는 객체, 함수 ..

default export와 named export 차이점 Default Export default 로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다. const foo = () => { ... } export default foo import 할 때는 아무 이름으로나 import 가능하다. import 아무이름 from './foo.js' 선언과 동시에 default export 는 불가능하다. (named export만 가능) //named Export export const test = ... named Export 한 파일 내에서 여러 변수/클래스 등등을 export 하는 것이 가능하다. export class test {...} expo..

JSX는 html처럼 보이지만, 자바스크립트의 확장문법이다. JSX 규칙 반드시 하나의 엘리먼트로 감싸야 한다. 자바스크립트 코드를 적용할 땐 {}안에 작성한다. JSX 내부에서는 if문을 사용할 수 없다. 따라서 IIFE 또는 삼항연산자를 사용한다. (JSX가 if문, for문 안으로 들어가는건 상관없다.) 엘리먼트의 클래스 이름을 적용할 땐, class=가 아닌 className= 을 사용한다. JSX 작성시 필수는 아니지만, 이 작업을 수행할 때 자동 세미콜론 삽입을 피하고자 괄호로 묶는 것을 권장한다. JSX ? 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전..