전체 글 (131) 썸네일형 리스트형 [ReactJS] To Do List - 배열의 요소 가져오기- with .map horizontal rule reactJS를 잘하는 개발자라는 건 JavaScript을 진짜 잘하는 개발자라는 의미이다. .map 은 배열에 함수를 넣게 해준다. 그리고 그 함수는 배열의 모든 요소에 적용되게끔 해준다. 그리고 .map() 에서 return 무엇이던 간에 새로운 배열의 요소로 들어가게 된다. 모든 요소에 대해 실행된다.(그렇기에 요소의 개수만큼 반복될 것이다) 그리고 어떠한 값이건 간에 그 함수에서 return 해준 값이 배열의 요소로 들어가게 될 것이다. map 은 하나의 arrary 안에 있는 item,element를 내가 원하는 무엇이든 간에 것으로 바꿔주는 역할을 하기 때문이다. 그리고 새로운 array를 리턴해주기 때문이다. 함수가 배열의 각 원소를 한번씩 거쳐가면서 실행될 것이.. [ReactJS] To Do List - 배열(Array)을 선언하고 요소(Element)를 추가하기- with state 어떻게 input 값을 컨트롤 했지? 바로 state를 통해서다.(변수를 선언하고 싶다? reactJS 에서는 state) 하지만 우리가 직접적으로 state를 수정하지 못함을 알아야 한다. 일반적인 JavaScript 였다면 toDos.push() 이런식으로 했겠지만 const [toDos,setToDos] = useState([]); 이렇게 ReactJS 에서 배열을 선언한 경우에는 당연하게 modifier를 이용해서 state를 수정해 주어야 한다. array를 직접적으로 수정하지 않으면서 setToDos array 에 element를 추가하는 방법을 알아야 한다. modifier 안에서는 두가지 방법으로 값을 변경해 줄 수 있다. 첫번째는 값을 직접 넣어 주는 것이다. (위의 직접적으로 state.. [ReactJS] UseEffect(2) - Clean Up function ReactJS 의 마법같은 일은 그것이 컴포넌트를 수정하고, 화면을 새로고침하는데에 있다. 즉, 새로운 데이터가 들어올때마다 UI 가 refresh 됨을 의미한다. 하지만 이런 경우에 문제가 생길때가 있다. 언제? 컴포넌트 안에 한번만 실행시키고 싶은 코드가 있거나 특정 state의 변화에 의해서만 UI를 refresh 하고 싶을 때가 있기 때문이다. 이전에는 코드가 언제 실행되어야 할 지 결정할 수 없었는데, 이제는 가능하게 됐다. useEffect 가 이를 가능하게 해주었다. useEffect는 두 개의 인자를 가지는 함수이다. 첫번째 인자는 우리가 실행시키고 싶은 코드였고 그리고 두번째 인자는 dependencies 라고 부르는, react.js 가 지켜보아야할 대상들을 가르킨다. 그것이 변화할때,.. [ReactJS] 프로젝트[4] - Effect : useEffect 의 마법 Deps 우리가 입력을 할때마다 state가 변경된다. 다행히도 useEffect가 있으니깐 이럴때 마다 API 반복적으로 호출되는 문제등을 막을 수 있다. 두 개의 state의 변화가 일어나고 있다. 첫 번째는 검색창에서 keyword state가 두 번째는 이후에 clickme 가 클릭되면 counter state 가 말이다. 그치만 input 창에 입력되어서 keyword state 만 변할때 render 가 되길 원하지 input을 마치고 keyword state은 더이상 건들게 없는데 counter state 에 변화가 생겨서 전체가 리랜더링 되는건 싫은 거다. 두번째 인자가 [] 이렇게 비어있는 경우에는 첫번째 인자의 함수가 한번만 실행되고 말았다. 하지만 두번째 인자에 state를 넣어주면,.. [ReactJS] 프로젝트[4] - Effect : useEffect 의 마법 Deps 우리가 입력을 할때마다 state가 변경된다. 다행히도 useEffect가 있으니깐 이럴때 마다 API 반복적으로 호출되는 문제등을 막을 수 있다. 두 개의 state의 변화가 일어나고 있다. 첫 번째는 검색창에서 keyword state가 두 번째는 이후에 clickme 가 클릭되면 counter state 가 말이다. 그치만 input 창에 입력되어서 keyword state 만 변할때 render 가 되길 원하지 input을 마치고 keyword state은 더이상 건들게 없는데 counter state 에 변화가 생겨서 전체가 리랜더링 되는건 싫은 거다. 두번째 인자가 [] 이렇게 비어있는 경우에는 첫번째 인자의 함수가 한번만 실행되고 말았다. 하지만 두번째 인자에 state를 넣어주면,.. [ReactJS] 프로젝트[3] - Effect (useEffect) ReactJS에서의 마지막 중요한 컨셉이다. state(데이터를 저장하는 방식, state 는 modifier라는 state를 변화시킬 수 있고 동시에 랜더링도 다시 시키는 함수가 따라온다) props(부모 컴포넌트가 랜더링될때 자식 컴포넌트도 랜더링이 당연히 되는데 동일한 컴포넌트의 경우에 데이터를 전달하는 방식을 가르킴. 데이터를 전달해서 그것을 바탕으로 다르게 랜더링을 해줄 수 있다. props는 일종의 부모 컴포넌트가 자식에게 데이터를 전달하는 방식을 가르킨다.) (props 가 Object 안에 property 랑 다르게 JSX 태그 안에 넣어서 보내줄 수 있는 걸 props 라고 하잖아) effct (마지막 대장) CRA 에서 작성하고 있기 때문에 React.useState() 이런식으로 적을.. [ReactJS] 프로젝트 [2] CRA(create react app)의 장점 Button.js 를 만들고 export를 해주고 index.js 에서 import를 해주자. 하지만 이렇게 컴포넌트를 만들고 사용하지 않으면 Warning 이 뜬다. 이런 점이 create-react-app 를 사용했을 때의 장점이다. 이전처럼 컴포넌트를 랜더링 하는 방법 (, Props 를 사용하는 방법, 쓸수 있고 다 같지만 이제는 전보다 많은 파일들을 가지게 되었다. 보다 편리하게 코드들을 덜 답답하게 관리할 수 있게 되었다. 보다시피 create-react-app을 쓰는 이유는 개발환경이 훨씬 좋기 때문이다. Button 컴포넌트에 마우스를 올리면 이렇게 필요한 Props 가 뜬다.(매우 매우 유용한 기능이다) 이제 PropTypes를 사용해 보자. install 해주어야 한다. 아래 무엇이든 .. [VScode] 확장프로그램 VScode는 다양한 확장 프로그램을 제공한다. Prettier : 코드 자동정렬 ESLint : 이벤트 종류, 타입 종류 도움말 제공 이전 1 2 3 4 5 6 ··· 17 다음
