❄️ React13 [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. [React] 리액트 프로젝트 모바일로 접속하기 ✔️조건 : 같은 네트워크에 있어야한다!같은 와이파이 연결을 하시오.npm start를 하면 이렇게 주소 창이 뜬다. 모바일은 저기로 접속하면 안되고~!일단 저 파란색 포트 번호를 기억해둔다. 앵간하면 3000일것이다. 1. windows는 cmd 창을 켠다.2. 명령어에 ipconfig 입력.3. 무선 LAN 어댑터 - IPv4 주소에 보면 192.---.---.--- 뭐 이런게 뜰것이다. 4. 모바일 주소창에 http://cmd창에 뜨는 주소:포트번호 를 입력한다. 접속하면 끝! 2024. 9. 18. 이전 1 2 3 다음
