Udemy 강의를 통해서 React,Next,Typescript.js를 공부하고 있다. 아직은 리액트 단계이지만, 내가 놓치고 있었던 부분들을 다시 한번 챙겨준다. 예를 들자면 export default ooo에서 default의 의미 같은 것들. 진짜 내가 개발 개념이 좀 많이 엉망이었구나를 깨닫게 해주는 유데미 강의이다 !

1. 페이지 이동을 위해 npm install react-router-dom을 설치하고 코드도 계속해서 보았는데 설정한 path대로 URL이 출력되지 않고 빈 화면만 나왔다. 구글로 서치하던 중에 기존에 설치했던 react-router-dom을 uninstall하고 npm install react-router-dom@5 로 했더니 원하던 결과가 출력되었다. 2. Unexpected use of 'location' no-restricted-globals 의 경우 스택오버플로우를 참고해보니 location 변수를 사용하는 곳 위에 // eslint-disable-next-line no-restricted-globals 를 추가하라고 한다. 그대로 따라해보니 리액트에서 오류메시지는 뜨지 않았다.

아직 React의 key-props 그리고 컴포넌트들이 헷갈린다. 이참에 이 둘의 개념들에 대해 한 번 정리해보자. Warning: Each child in an array or iterator should have a unique "key" prop ... 리액트를 개발하다 보면 자주 나오는 Error.. 이전 포스팅에서도 이 에러에 대해 다뤘다. 왜 React의 Element에 key prop이 필요하고, key prop을 사용하면서 주의해야 할 점? - 재조정 (Reconcilation) key prop을 이해하기에 앞서 React가 화면을 어떻게 업데이트 하는지 알 필요가 있다. React는 새로운 엘리먼트를 그리기 위해 비교 알고리즘 (Diffing Algorithm)을 이용해서 효율성을 최대화..

1. key props 값은 유일해야 한다 key={movie.id} Movie 컴포넌트에 위와 같이 key props를 추가해주면 된다. 2. HTML에서는 class라고 쓰지만, 리액트에서는 className을 사용한다. 3. PropType propTypes 전부 PropTypes 라고 써줬는데 리액트 화면에서 에러가 났다. propTypes로 쓰라고. 그런데 고치다보니 어떤건 propTypes를 써야 하고 어떤 속성은 PropTypes라고 쓰라고 하고 어떤 것은 ProtoTypes 라고 이건 무슨..? Quick Fix를 하니 결과는 잘 나왔다. 그런데 왜 어떤건 propTypes라고 써줘야 하고 어떤 것은 PropTypes라고 써줘야 하는 걸까 구글링을 해보았는데 이런 케이스를 찾지 못했다.. ..

1. state 리마인드 다시 한번 주의하자 리액트는 state가 변경되면 render() 함수를 다시 실행하여 변경된 state를 화면에 출력한다. 그런데 state를 직접 변경하는 경우에는 render() 함수를 다시 실행하지 않는다. 즉 어떤 동작이 업데이트가 되면(+ 버튼을 누른다거나, - 버튼을 누른다거나.. 하면) render() 함수가 다시 실행되어 그 결과를 화면에 출력해주는 것이다. 2. 리액트 생명주기 큼직큼직한것만 보자면 constructor() 함수 실행 > render() 함수 실행 > componentDidMount() 함수 실행 1.Add또는 Minus 버튼을 누르면 setState() 함수가 실행되고 2. 버튼이 눌렸으므로 화면의 변화가 생긴다. render() 함수가 다시 ..

요즘 리액트를 공부하면서 map() 함수가 눈에 많이 보인다. 그리고 이전에 파이썬 알고리즘을 공부할 때도 map() 함수를 썼었는데 이참에 map() 함수에 대해 좀 더 자세히 공부해보고자 한다. 아직까지는 개념이 헷갈리는 것 같다. map() - '자바스크립트' '배열' '객체 내장 함수'인 map 함수를 사용하면 반복되는 컴포넌트를 렌더링 할 수 있다. - map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 프로세싱 한 후 그 결과로 새로운 배열을 생성한다 const numbers = [1,2,3,4,5]; let processed = numbers.map(function(num) { return num*nu }); ---화살표 함수로 정의시 const result = numbers..