react10 [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. [React] Map을 리액트에서 사용할때 - 리스트를 반환한다매! 근데 왜 UI가 반복적으로 출력됨? 얘는 리스트가 아니잖아 안녕하세요? 좀 더 발전해온 블로그 주인장입니다.저번에 map 함수에 대해 알아보았는데, 키값을 왜 사용하는지도 몰랐고,그냥 단순히 "이렇게 사용한다" 라고만 작성했는데이제 이 친구에 대해 조금은 알 것 같아요. 오늘은 Map 에 대해 다시 알아보겠습니다.1. Map 을 어디서 사용할까?투두리스트를 만든다. 할일이 많아서 할 일을 많이 추가할것이다.그런데 그럴때마다 공부하기마라탕먹기...계속 추가추가하면 보기도 싫고 나중에 관리하기도 힘들겠지. 그래서 할일이 담긴 데이터를 만든다. todoData = [ { id: 1, title: "공부하기", completed: false }, { id: 2, title: "마라탕먹기", .. 2024. 12. 4. 이전 1 2 다음
