Library & Framework

[React.js] setState() / state 값 갱신

setState는 이미 존재하는 state를 바꿔주는 역할을 하는 함수이다. 왜 state를 변경할때는 setState를 해야하는가? 더하기 빼기를 해주는 간단한 원리를 구현 할 때, state를 직접 조작하는 경우 다음과 같이 실행된다. 여기서 빨간색 네모를 보면 경고가 발생한 것을 알 수 있는데, state를 직접 변경하지 말라는 뜻이다. 이게 왜 뜨냐면, state를 단순히 바꾼다고 해서 렌더링이 다시 되지는 않기 때문이다. 즉, state의 값을 그냥 바꿔주어도, 렌더링이 다시 되지는 않으니, 웹의 값이 바뀌지는 않게 되는 것이다. 따라서 state의 값을 변경하고 싶을 때는 setState()함수를 이용하여 값을 바꿔주어야한다. 위와 같이 setState를 사용하게 되면, state를 바꿔줄 수..

[React.js] React application 새로 만들기 / react app 새로 만들기

yarn global add npx npm i npx -g npx create-react-app "앱이름" 위 두줄의 명령어: 최신 버전의 npm, yarn 설치 맨 밑 명령어: 앱 설치

[React.js] Warning: Each child in a list should have a unique "key" prop. 경고 문구 없애기

리액트 공부중 다음과 같은 경고문을 확인했다. 이때 사용된 코드는 다음과 같다. 이 에러를 없애는 방법은 간단하다. Movie 컴포넌트를 사용할 때, key prop을 넣어주면 된다. 배열을 통해 object들을 저장하고 사용함으로서 key가 요구되는 것 같다. 따라서 "id" 속성을 배열 내 각 object들에 넣어주고, 오브젝트 호출 시 key = {movie.id}를 통해 고유한 key 값을 지정해주면 된다. id를 따로 만들어주지 않고, 다른 속성값으로 key prop을 설정해주어도 된다. 하지만 id를 사용하는 것은 데이터의 기본이니, 이런 꼼수보다는 정공법이 나을 거라 생각된다.

[React.js] 리액트 반복문 map() 함수

리액트에서 여러 컴포넌트를 불러올 때는 map() 함수를 사용할 수 있다. 이 map 함수는 어떤 배열에 대해 각각 정해진 함수를 실행시켜주는 것이고, forEach함수와 비슷한 것 같다. 물론 map이 아닌 단순 반복으로도 컴포넌트들을 가져와서 사용할 수는 있다. 그럼에도 map함수를 사용하는 이유는 다음과 같다. 1. 코드는 짧고 간결할수록 좋다. 2. 실제 데이터는 사전에 한번에 정의하여 사용할 수가 없다. 2번 예시의 이유가 사실 더 큰데, 실제로 영화리스트를 만든다고 하면, 사용하면서 새로운 영화들이 계속 추가되어야 할 것이다. 하지만 그 때마다 새로 Movie 컴포넌트를 추가하여 출력한다고 할 경우, 불필요한 코드 수정 요소가 생길 수 있다. 따라서 배열을 통해 영화 데이터들을 관리하면서, m..

[React.js] component 와 props

1. Component 우선, 리액트는 HTML에 직접 요소를 넣지 않는다. 기본적으로 index.html에 들어갈 내용을 index.js에서 불러와 사용한다. 이를 렌더링이라고 하고, 그 내부 요소들을 component라 한다. 이렇게 렌더링을 진행하는데, 이때 직접 렌더링 할 수 있는 component는 오직 하나이다. 따라서 보통 App.js를 렌더링하고, App.js 내 App() 함수에서 다른 component들을 사용하게 된다. 굳이 뽑자면 component는 함수이다. 다른 js파일을 생성하고 그를 import해 사용하더라도, 결국 그 js파일 내에 함수를 불러다가 사용하는 것과 같다. 2. Props Props란 부모 component가 자식 component에게 넘겨주는 매개변수라고 생각..