React

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. 지금까지 만든 코드를 살펴보면, 로직들을 고립시켜 분리된 컴포넌트로 재사용 가능하다. Props - Props는 프로퍼티 (properties)의 약자이다. - Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방식이다. 간단한 예제 결과 화면 지금 하고 있는 것은 단지 함수들을 호출하는 것이다. 이것을 함수형 컴포넌트라고 부른다. 함수형 컴포넌트는 function 으로 정의하고 return 문에 jsx 코드를 반환하는 특징을 가진다. 위 코드에서 아쉬운 점이 존재한다. 여러 버튼이 존재할때 각 버튼에 동일한 style을 적용하려면 동일한 코드를 버튼마다 추가 작성해줘야 한다는 것이다. 그러..

보호되어 있는 글입니다.

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. State Functions setState 함수를 사용해 state 값을 변경하는 두 가지 방법이 존재한다. 1. setState()를 이용해 직접 원하는 값을 넣어준다. (setState(값)) 2. 이전 값을 이용해 현재 값을 계산한다. (함수적 갱신) : 함수의 첫 번째 인자 (argument)는 현재 값이다. 함수의 return값이 새로운 state값이 된다. -> 두 가지 방법 중 두 번째 (= 함수적 갱신) 방식이 더 안전하다. 왜냐하면 함수적 갱신 방식으로 함수를 사용했을 때 React가 해당 current가 확실히 현재값임을 보장해주기 때문이다. 참고 React는 HTML과 비슷한 JSX 방식을 사용한다. 하지..

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. state는 기본적으로 데이터가 저장되는 곳이다. 우리가 현재 하고자 하는 것은 React JS를 활용해 다음 사진과 같이 버튼을 클릭할 때마다 숫자가 증가하는 결과물을 생성하는 것이다. 현재 코드는 다음과 같다. 결과물을 생성하기 위해 두 가지 방법이 존재한다. 하나는 좋지 않은 방식이고 나머지 하나는 우리가 해야 할 최고의 방식이다. 먼저 좋지 않은 방식으로 수행해보며 우리에게 무엇이 필요하며, 어떤 걸 해야 되는지 이해한다. 첫 번째 방식 첫 번째 방식 #1 첫 번째 방식 #1 결과 : 아무리 버튼을 클릭해도 UI가 업데이트되지 않는다. 이러한 문제가 발생하는 이유는 컴포넌트를 단 한번만 렌더링 하기 때문이다. 즉, 이러..

이 글은 노마드 코더님의 React 강의를 학습한 내용을 기반으로 작성합니다. 바닐라 JS와 React JS를 사용해 버튼을 몇 번 클릭했는지 세는 간단한 어플을 만들어보고 각 코드를 비교 분석해 React를 사용하는 이유에 대해 알아보도록 한다. React JS 설치 : 두 개의 Javascript 코드 (react, react-dom)를 import 해야 한다. 그리고 console에서 다음과 같이 React를 부를 수 있으면 된다. Vanila JS 바닐라 JS Total clicks: 0 Click me 바닐라 JS 결과 버튼을 클릭할 때마다 숫자가 커지는 결과물이 생성되었다. React JS 연습 #1 React JS 연습 #1 여기서 render란 React element를 가지고 HTML로 ..