아직 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라고 써줘야 하는 걸까 구글링을 해보았는데 이런 케이스를 찾지 못했다.. ..

/ (루트) 최상위 디렉토리 루트 아래의 모든 디렉토리가 루트로부터 상속을 받는다. 만약 /home/user/documents에 내가 파일을 저장했다면, 이 디렉토리 구조는 root->home->user->documents로부터 전달된 것이다. * 참고로 리눅스의 디렉토리 혹은 파일 시스템 구조는 윈도우와는 조금 다른 구조를 가지고 있다. 리눅스에서는 디렉토리 구분을 할 때 / (슬래시)를 이용하지만 윈도우는 \ (역슬래시)를 이용한다. 리눅스에서는 디렉토리라고 부르지만, 윈도우에서는 폴더 라고 부르는 약간의 차이가 있다. 리눅스 시스템의 디렉토리 구조는 전체적으로 역 트리 구조를 취하고 있다. 명령어의 종류와 성격, 사용권한 등에 따라 각각의 디렉토리들로 구분된다. /bin - 기본적인 명령어가 저장된..

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..

1. 함수형 컴포넌트 function App() { return ( 우리가 클래스형 컴포넌트를 사용하는 이유는 state 를 사용하기 위해서이다. state는 객체 형태의 데이터이고 state를 사용하려면 반드시 클래스형 컴포넌트 안에서 소문자를 이용하여 state라고 적으면 된다. 2. state의 쓰임 state는 동적 데이터를 저장할 수 있어야 한다. 동적이라는 것은 값을 바꿀 수 있다는 말인데, 즉 값을 바꿀 수 있도록 코드를 작성해야 한다. (예를 들면 사용자 동작에 따라 state의 count를 바꿀 수 있도록) react는 state를 직접 변경하지 못하게 한다. add = () => { // console.log('add'); this.state.count=1; }; minus = () =..