yeeendy

Custom Hooks 개발자가 스스로 커스텀한 훅 이를 이용해 반복되는 로직을 함수로 뽑아내어 재사용 할 수 있다. 주로 사용하는 경우 여러 url을 fetch할 때 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 장점 상태관리 로직의 재활용이 가능 클래스 컴포넌트보다 적은 양의 코드로 동일한 로직 구현 가능 함수형으로 작성하기 때문에 보다 명료하다 //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트 function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusCha..

컴포넌트는 기본적으로 상태가 변경되거나 부모 컴포넌트가 렌더링이 될 때마다 리렌더링을 하는 구조이다. 너무 잦은 리렌더링은? → 앱에 좋지 않은 선능을 끼친다! React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드라고 했는데, 그중 렌더링 최적화를 위한 Hook이 있다 → useMemo, useCallback ! useMemo 특정 값(value)을 재사용하고자 할 때 사용하는 Hook function Calculator({value}){ const result = calculate(value); return {result} ; } 코드 설명 : props로 넘어온 value 값을 calculate라는 함수에 인자로 넘겨서 result 값을 구한 후, 엘리..

Hook 함수 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메서드 → React Hook은 함수 컴포넌트가 상태를 조작하고 및 최적화 기능을 사용할 수 있게끔 하는 메서드 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해준다. 똑같이 작동하는 카운팅 기능을 작성한다고 가정해보자 Class Component class Counter extends Component { constructor(props) { super(props); this.state = { counter: 0 } this.handleIncrease = this.handleIncrease.bind(this); } handleIncrease = () => { this.setState(..

구글 캘린더를 따라 만들어보려고 하는데 사용할 라이브러리에 대해 알아보자 dayjs 달력 라이브러리들이 많은데 그 중에 dayjs를 선택한 이유는 다른 라이브러리들은 날짜만 나오는 게 아니고 위에 날짜(2023년 6월)까지 붙어나오는 경우가 많은데 분리가 안 돼서 따로따로 배치하는 것이 안 됐다. javascript 날짜 관련 라이브러리 중 가장 가벼운 라이브러리이다 https://day.js.org/en/ 사용 방법 새로운 객체 생성 //현재 날짜, 시간이 포함된 객체 dayjs(); //지정한 날짜 객체 생성 dayjs('2023-06-23'); dayjs('2023-06-23 14:08:34'); 날짜 형태 지정 let date = dayjs(2023-06-23 10:30:25') date.form..

Redux 리액트의 상태 관리 라이브러리 state = 사용자 지정 변수 리덕스 = state를 한 곳에다 저장 저장할 때 store 단위로 저장, state의 저장과 조작을 다룬다 -> 사용하기 편리하며 오류를 잘 잡아줄 수 있다. Redux 쓰는 이유 props 문법 귀찮을 때 state 변경 관리할 때 Redux 구조 상태가 변경되어야 하는 이벤트가 발생 → 변경될 상태에 대한 정보가 담긴 Action 객체가 생성 이 Action 객체는 Dispatch 함수의 인자로 전달 Dispatch 함수는 Action 객체를 Reducer 함수로 전달 Reducer 함수는 Action 객체의 값을 확인 → 전역 상태 저장소 Store의 상태를 변경 상태가 변경되면, React는 화면을 다시 렌더링 단방향 흐름..

이번 단원에서는 redux에 대해 배운다! 본격적인 redux 공부 전에 상태 관리에 대한 개념과 상태 관리 라이브러리(Redux)의 필요성에 대해 먼저 알아보자 프론트엔드 개발에서의 상태 관리 상태란? → UI에 동적으로 표현될 데이터 Side Effect란? → 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인 → ex) 네트워크 요청(백엔드 API 요청) React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것 상태의 두 가지 구분 로컬 : 특정 컴포넌트 안에서만 관리되는 상태 전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태 전역 변수는 남용하는 것이 좋지 않지만, 경우에 따라 필요하다 → 서로 다른 컴포넌트가 사용하는 상태의 종류가..

styled-components와 useRef를 활용해 과제해보는 시간이었다 과제를 하다가 알게된 개념을 정리해보자 1. setIsOn(!isOn) 보다 setIsOn((prev)=>!prev)가 더 안정적이다. 2. e.sotpPropagation() 우선 useState를 사용할 때 기본 boolean값을 바꿀때 // 예시 const [isOn, setIsOn] = useState(false); // true로 바꾸고 싶을 때 setIsOn(!isOn) // 이런 방식으로 많이 쓰는 데 setIsOn((prev)=>!prev) // 이 방식으로 쓰는 게 더 안정적이라고 한다 setIsOn(!isOn) 보다 setIsOn((prev) => !prev) 방식이 더 안정적인 이유 예측 가능성이 높다 use..

CDD (Component Driven Development) 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 재사용할 수 있는 UI 컴포넌트를 만들어 활용할 수 있다. CSS 전처리기 (CSS Preprocessor) CSS가 구조적으로 작성될 수 있게 도움을 주는 도구 우리가 흔히 CSS 문서를 작성할 때는 color값 찾기, tag를 닫는 일 등 많은 번거롭고 반복적인 작업을 해야하고 그뿐만 아니라 클래스의 상속과 같은 사항으로 점점 CSS 문서는 양이 많아지고 유지관리에 많은 영향을 끼친다. 이런 CSS의 문제점들을 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 해결해 나갈 수 있다. 하지만 CSS 전처리기 자체만으로는 웹 서버가 인지하지 못하기 때문에 CSS 전처리기에 맞는 Compiler..

오늘의 과제는 서버 베어미니멈 해결하는 것 섹션 1에서 바닐라 js로 만들었던 아고라 스테이츠를 리액트로 변환하기 css파일은 그대로 복붙하면 됐고 html파일도 jsx문법에 맞게 수정해서 App.js return 부분에 추가만 하면 기본적인 틀은 만들어졌는데 바닐라로 구현했던 js파일을 리액트로 변환하는 것이 쉽지 않았다. 어찌저찌 해결하다보니 잘 와닿지 않았던 useState, props 조금은 더 익숙해진 것 같았다. 그 와중에 이미지 태그가 적용이 안 되어서 애를 먹고 있었다. 파일 안에 이미지 파일을 적용했음에도 불구하고 경로를 지정해도 렌더링이 안 됐다. require를 사용해서 어쩌구...하라고 하기는 했는데 그것도 적용이 안 됐고(ㅠㅠ) 바닐라js처럼 경로를 설정해도 안 되고 링크를 사용하..

Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 얘기한다 ex / React에서 컴포넌트 내에 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 let foo = 'hello'; function bar(){ foo = 'world'; } bar(); //bar는 Side Effect를 발생시킴 Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않는다 function upper(str){ return ..