본문 바로가기

리팩토링3

리액트 함수형 컴포넌트 리팩토링하기 state 컴포넌트내 상태관리 클래스형 컴포넌트 this.state = { isVisible: true, users: [], }; 함수형 컴포넌트 useState 훅 사용하기 const [isVisible, setIsVisible] = useState(true); const [users, setUsers] = useState([]); useCallback const toggleVisibility = () => { setIsVisible(!isVisible); } 이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다. useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다. const toggleVisibility = useCallback( () => setIsVisible(!is.. 2020. 9. 30.
Refactoring javascript 2 Clean coding in JavaScript 2 리팩토링 자바스크립트, 클린 코드 작성하기 2 Refactoring js example code destructuring, spread operator, async-await, template literals, optional chaining example code 디스트럭처링, 스프레드 오퍼레이터, 어싱크 어웨이트, 템플릿리터럴, 옵셔널 체이닝 활용하기 Optional Chaining 옵셔널 체이닝 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다. 만약 참조가 nullish (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 und.. 2020. 9. 23.
Refactoring javascript 1 Clean coding in JavaScript 리팩토링 자바스크립트, 클린 코드 작성하기 Using the map function before const myList = list => { const newList = [] for (let i = 0; list.length; i++) { newList[i] = list[i] * 2 } return newList } after const myList = list => list.map(x => x * 2) Avoid callback hell with async/await before const sendToEmail = () => { getIssue().then(issue => { getOwner(issue.ownerId).then(owner => { send.. 2020. 9. 23.

티스토리툴바