Java script (21) 썸네일형 리스트형 How to write clean react code 본 글은 Reed Barger의 How to write cleaner react code를 읽어보며 축약하여 번역/해석한 글입니다. (의역,오역이 있을 수 있습니다.) 원문 : www.freecodecamp.org/news/how-to-write-cleaner-react-code/ 리액트 개발자로서 우리는 간단하고 읽기 쉬운 깔끔한 코드 작성을 원한다. 이 가이드에, 나는 당신이 깔끔한 코드로 프로젝트를 만들고 당신의 코드를 확인하기 더 쉽게 해주는 최고의 일곱가지 방법을 서술하였다. 일반적으로 깔끔한 코드를 작성하는 것을 배우는 것은 당신을 더 가치있고 더 행복한 리액트 개발자로 만들어 줄 것이다. 시작해보자! 1. JSX 단축을 활용한다 아래 예시에서 우리는 Navbar 컴포넌트 내에 앱 title을.. TypeScript에서의 함수 간단 정리. (선언, 익명, 콜백) 함수 어플리케이션 코드를 구성하는 기본 요소. 재사용성을 위해 코드를 묶어놓은 code chunk, 혹은 module. function in JS 1) 선언적 함수 (function func (a,b){~~~}) 호이스팅 발생(코드가 호이스팅(위로 올라감) 되는 것. 함수를 사용한 후에 정의해도 동작하는 것) 2) 익명 함수 (function (a,b){~~~}) 호이스팅 발생X , 함수 선언 이후에만 사용 가능. function in TS 1) 선언적 함수 1) 파라미터와 리턴 값에 타입을 추가하여 안정성을 강화한다. (function (a:string, b:string):string{~~~} ) 2) rest parameter로 매개변수 전달. function rest (a:string, b:stri.. Immer.js Immer immer는 리액트 혹은 리덕스에서 불변성을 지켜주면서 state를 업데이트를 해주고 싶을 때 사용하는 라이브러리이다. 기존 방식은 이전 상태를 spread하여 새로 만들어주고 이후 상태를 덧 붙여서 업데이트하는 방식이였다. redux에서 reducer를 통한 state 업데이트시에 대한 예시를 보면, const initialState = { isLoggingIn: false, data: null, }; const userReducer = (prevState = initialState, action) => { switch (action.type) { case "LOG_IN": return { ...prevState, data: action.data, }; case "LOG_OUT": retur.. Immutable.JS Immutable.JS immutable.js는 자바스크립트 상에서 불변성의 데이터를 다루는 것을 도와준다. 리액트/리덕스에서 상태 값 혹은 상위 컴포넌트에서 전달받은 props를 변경해줄 때 값에 직접 접근하여 수정하는 것이 아닌 스프레드를 이용해서 새로운객체/배열을 만들어서 수정해주었다. 이런 작업이 계속 되다 보면 코드가 복잡해지는 문제점이 있다. 가령 중첩객체의 값을 업데이트하게 된다면 아래와 같은 성가신 단계를 거쳐야한다. let object1 = { a: 1, b: 2, c: 3, d: { e: 4, f: { g: 5, h: 6 } } }; // h값을 10으로 업데이트함 let object2 = { ...object, d: { ...object.d, f: { ...object.d.f, h: .. 이전 1 2 3 4 ··· 6 다음
