뉴히의 개발 로그

map함수 key값 map함수로 반복되는 엘리먼트를 생성할때 에러는 아닌 경고가 뜬다 !!! 맵함수는 몇번째인지, 유니크한 무언가 있는지, id 가 무엇인지, 어떠한것을 태그를 붙여줘야한다. 태그에 key={} 넣어줘야함 나같은 경우는 id를 가져오기때문에 각 id를 key값으로 넣어줬다! key={item.id} Router import 라우터를 리턴할때는 import를 잘해야함 ㅎㅎㅎㅎㅎ 리액트에서 제공하는 API 엘리먼트가아닌 우리가 export한 Router를 잘 가져와야한닿ㅎㅎㅎㅎㅎㅎㅎㅎㅎ 화면이 안뜨고 할 수있음 ! 동료분도 뭐가 문제인지 한참을 헤멧는데 이것때문이엇당 기본 매개변수 지정 과거의 코드를 안쓰지는 않으나 현대코드로 편리하게 사용하자

Select - onClick, onBlur 이벤트 셀렉트 박스에 onclick으로 타겟의 텍스트로 상단 텍스트가 바뀌도록 코딩해뒀다. const [buttonText, setbuttonText] = useState('리액트'); const changeText = (e) => { const textValue = e.target.textContent; setbuttonText(textValue); setSlide((slide) => !slide); }; return ( setSlide(false)} className="selDefault" > {buttonText} 리액트 자바 스프링 리액트네이티브 ) 코드를 왜 이모양이르 짯는지 몰라도 ^^ 어제 잠결에인가 ㅎㅎㅎ onBlur를 추가하니 셀렉트 옵션들을 ..

React Styled Components CSS-in-JS 라이브러리 Styled Components를 사용해서 컴포넌트 만들기 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 기본사용 방법을 다룬글도 있긴한데 https://newheee.tistory.com/41 오늘은 props에 따라 다른 스타일 적용이 가능한 가변 스타일링에 대해 공부한 내용을 기록하려한다 const StButton = styled.button` align-items: center; background-color: ${(props) => props.bgColor || '#fff'}; border: ${(props) => props.stBorder || 'no..

styled components css에서 자바스크립트를 사용할 수 있는 styled components react 패키지 설치 후 사용 가능하다. yarn add styled-components 사용방법 // App.jsx import React from "react"; import styled from "styled-components"; // styled 키워드를 사용해서 styled-components 방식대로 컴포넌트 생성 const Box = styled.div` // styled.뒤에는 html의 태그를 넣는다 // 빽틱안에 css코드를 넣는다. jsx 안에 바로 사용하던 객체스타일 말고. 원래 css코드와 동일 width: 100px; height: 100px; margin: 20px; `..

Reducer : 변화를 일으키는 함수 리액트는 state의 변화가 있어야 리렌더링이 된다. 그래서 useState 사용시에 우리는 setState로 상태 변화를 주고 리렌더링이 발생하도록 했다. redux 에서는 reducer가 그 역할을 한다. state를 action의 type에 따라 변경한다. 리듀서는 인자로 state와 action 인자를 받는다. state에는 초기 상태값을 할당해 줘야한다. //초기상태값(state) const initialState = { number: 0 // number라는 state : 초기값 0 }; //리듀서 const counter = (state = initialState, action) => { switch (action.type) { case PLUS_ONE..

React Hooks [useState/useEffect/useRef/useContext/최적화(React.memo, useCallback, useMemo)] useState Hook : 리렌더링이 일어날 수 있게 상태를 변경해주는 Hook useEffect Hook : 컴포넌트가 화면에 보여졌을때, 컴포넌트가화면에 사라졌을때 어떠한 것을 실행하게하는 Hook useRef Hook : DOM 요소에 접근 할 수 있게 하는 Hook useContext : props drilling을 방지하기 위해 전역 데이터를 관리할 수있게 해주는 Hook React.memo : 부모컴포넌트로 인해 자식 컴포넌트들이 전부 리렌더링 되는것을 막는것(컴포넌트 memoization) useCallback : 함수형 컴포넌트의 ..

button 태그는 type이 submit이기 때문에 데이터 전송이 일어난다. 아무런 값이 없어도 말이다! 이렇게 뒤에 '/?' 물음표가 생겼다면 데이터 전송이 일어난것 그걸 막아주기 위해서 우리는 preventDefault를 사용! const clickAddTask = (e) => { if (!title || !text) { e.preventDefault(); alert('입력되지 않았습니다'); } }; 클릭이벤트가 일어나도 빈값이라면 preventDefault로 데이터 전송을 방지한다. 내코드에 적용하기 ! todo list 추가하는 핸들러! // JS const clickAddTask = () => { const addTaskList = { id: randomID(), title, text, is..

지난번 팀과제 진행시에 댓글등록 기능을 구현하기 위해 localstorage를 사용하는 팀들도 있었다. 하지만 우리팀은 mongoDB를 이용했기에 사용하지 않았었는데 이번 과제로 localstorage를 하용해야해서 개인과제에 + 기능 구현으로 localstorage를 이용해서 새로고침시에도 화면에 남아 있을수 있도록 구현했다. 기본 사용법은 지난번 글에! localstorage 기본 사용법 https://newheee.tistory.com/27 사용하는 건 생각보다 어렵진 않았다! localstorage 데이터 저장하기 const clickAddTask = () => { const addTaskList = { id: randomID(), title, text, isDone: false }; const ..