FrontEnd ✨/❄️ React15 [React] useEffect 제대로 이해해보기 (순수함수와 side Effect) 오늘은 리액트 hook중 useEffect에 대해서 알아보았다.순수함수부터 리액트 컴포넌트는 어떻게 만들어야하는지!정리를 해보았으니순수함수부터 side Effect까지 하나하나 씹뜯맛해보자" useEffect "우리가 외부 세계와 상호작용 하면서 해당 컴포넌트의 렌더링이나 성능에는 영향을 미치지 않도록 만들어주는 도구 이 훅을 사용하면 함수컴포넌트에서도 side effect 사용 가능effect란 함수형 프로그래밍 용어인 "사이드 이펙트(side effect)"를 가리킨다.✔️ 그럼 side effect가 먼데?이해를 하려면 순수함수부터 알아야한다.대부분의 리액트 컴포넌트는 순수 함수로 만들어졌다.순수함수 : 입력값에 대한 예측 가능한 출력 값을 반환한다.함수의 리턴 값이 동일한 인수(argument)에.. 2025. 3. 30. [React] 🚨"props drilling" - 제가 props를 계속 전달 전달하고있는데요... 리액트로 유튜브 클론 코딩을 할때였다.얼추 완성을 하고 프론트 퍼실님의 피드백을 받았다. 내가 맡은 부분은 short였다. 이건 내가 구현한 화면을 캡쳐해서 들고온것이다.. (미완성이지만)사진을 보면 알 수 있듯이 오른쪽에 뜨는 패널이 내용만 다를뿐 재사용되고있다.그래서화면의 재사용을 높이고자 컴포넌트 단위로 분리해서 코드를 짜고 있었다. short - video, panelpanel 안에 comment랑 explain 이렇게 구성했다. 그런데 문제점.. 의문점이 하나 발생했다.유튜브 API를 불러오기 전에 임시 데이터를 만들어서 넣었긴 한데,이걸 데이터 요청을 한번만 하기 위해서, (즉 데이터 한번만 불러오게 하려고) Short 여기서부터계속 props로 explain까지전달전달전달...하고 있는데 .. 2025. 3. 8. [React] 렌더링을 확인할 수 있는 리액트 크롬 확장 프로그램 이걸 다운받으면 된다!개발자 모드에서 Components -> Highlight update when components render 를 체크하면렌더링이 되는 부분에 박스가 쳐져서 확인이 가능하다! 2024. 12. 9. [React] 컴포넌트 자동으로 만들어주는 리액트 익스텐션 - rfc : 바로 함수형 컴포넌트 생성 - rce : 바로 클래스형 컴포넌트 생성 다운받는것을 추천한다. 2024. 12. 8. [React] useRef 렌더링 계속 되는거 막고자 useRef 사용했는데 엉뚱한 결과가 나와서 공부하고 작성하는글. 요약 : 꼭 ref 어트리뷰트를 사용해야한다. 그리고 화면 렌더링 되는곳에는 사용하면 안된다. 오직 값만!! 담아야한다.✨ useRef ✨: 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hookconst ref = useRef(initialValue)// initialValue: ref 객체의 current프로퍼티 초기 설정값// 초기 렌더링 이후부터는 무시된다. 반환값useRef는 단일 프로퍼티(current)를 가진 객체를 반환한다.- current : 처음에는 전달한 초기값으로 설정된다.- 이 current를 다른 값으로 바꾸는 방법: ref 객체를 JSX 노드의 ref 어트리뷰트로 React에 .. 2024. 12. 6. [React] e.target.value라고 써야하는 이유가 뭐야? 그냥 e라고 쓰면 안됨? 결론 : ㅇㅇ 안됨.투두 리스트를 만들고 있었다.이렇게 작성하고,inputChange함수를 작성하는데문득,const inputChange = (e) => { setValue(e);};이건 왜 안됨? 이라는 궁금증이 생겼다. e와 e.target.value의 차이이벤트 객체(e)와 그 객체 안의 특정 값(value)을 사용하는데서 차이가 있다. 1. ee는 이벤트 객체 전체를 의미콘솔창에 찍어보았을 때,위와 같은 결과가 뜬다.객체인것이다. 2. setValue(e.target.value)이 친구를 콘솔창에 찍어보았을때내가 입력한 값이 뜬다. 그럼 target은 뭐야. 왜 저렇게써target은 이벤트 객체(e)의 속성으로, 이벤트가 발생한 HTML 요소를 참조한다.그래서 input을 참조할 수 있는것이다... 2024. 12. 5. 이전 1 2 3 다음
