리액트 기초 4

Typescript와 React npm 모듈 설치관련 정보.

Typescript와 React npm 모듈 설치 관련 정보. 개발자에 관한 관심이 많아지면서, 자연스럽게 코딩을 접하는 분들이 많아지고, 프런트엔드에 필요한 프로그래밍 언어, 라이브러리 혹은 프레임워크를 배우시게 되는 과정에서 리액트를 알게되거나 배우시는 분들이 많아지는 것 같습니다. 저는 개인적으로 너무 좋은 현상이라고 생각합니다. 개발자는 자신의 지식을 이리저리 꽁꽁 숨기는 직업이 아닌 너도나도 지식을 나누어 필요한 혹은 유용한 프레임워크 라이브러리 혹은 알고리즘을 대중화시키고 나누는 것이 중요합니다. 리액트를 배우시는 경우라면 자바스크립트를 어느 정도 사용하실 수 있다는 뜻일 것입니다. 또한 그 과정에서 타입스크립트를 들어보시거나 경험해 보신 분들도 많을 것입니다. 오늘은 타입스크립트로 리액트 프..

React hooks 리액트 훅 리스트와 map함수.

React hooks 리액트 훅 리스트와 map함수. 프로그래밍에서 Iteration 즉 반복문이 없다면, 얼마나 불편하고 손이 많이 갈까요?? 수작업으로 한두 개야 만들 수 있을 것입니다. 하지만 그것이 몇십 개, 몇백 개씩 된다면?? 어떨까요? 시간과 노력이 많이 필요할 거고 코드 자체도 아주 보기 싫겠죠. 그렇다면 리액트에서 이러한 반복을 줄이기 위해, 어떤 방법이 있을까요?? 오늘도 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. 반복문이란? foreach?? map?? 리액트와 map 함수. 마치며. 1. 반복문이란? 반복문이란 무엇일까요? 반복문이란, 어떠한 동작을 정해진 수 혹은 정해지지 않은 수에 맞춰 같은 활동을 반복하게 해주는 코드라고 보시면 될 것입니다. 개발자는 항상 코드를 가능한 한..

React hooks JSX란? 리액트 훅 JSX란?

React hooks JSX란? 리액트 훅 JSX란? 우리는 저번 시간 useState와 useEffect를 배웠고 그 사이 짧게 JSX에 관해 언급했습니다. JSX란 아래와 같이 HTML의 형태를 띠고 있습니다. hello 하지만 엄밀히 말하자면 이건 HTML이 아닙니다! 엄연한 자바스크립트 문법이죠!! 오늘도 어김없이 전혀 비전문적이고 쉽게 알아보겠습니다. 목차 JSX의 법칙. JSX의 사용법. 컴포넌트를 사용할 때는? 마치며. 1. JSX의 법칙. 사실 딱히 법칙이라고 할만한 것도 없는데, 법칙이라 정하니 민망합니다. 하지만 여전히 몇 가지 지켜주어야 하는 것들이 있습니다. 같이 알아보겠습니다. - 파일 안에 JSX에서 최상위에 위치한 Tag는 꼭 하나여야 합니다. 무슨 말일 까요? 기본적인 리액트..

React hooks 리액트 훅 useEffect란?

React hooks 리액트 훅 useEffect란? 오늘은 또 하나의 리액트 훅에 없어서는 안 될 useEffect를 알아보겠습니다. 여느 때와 마찬가지로 전혀 비전문적이고 간단하게 설명하려고 합니다. 목차. useEffect란 무언인가? useEffect를 사용하는 여러 가지 방법. useState와 useEffect 사용법. 마치며. 1. useEffect란 무엇인가? useEffect는 기본적으로 몇 가지 조건에 의해 작동하게 됩니다. 첫번째 : 페이지가 처음 렌더링 되고 난 후 useEffect 무조건!! 한번 실행됩니다. 두 번째 : useEffect에 배열로 지정한 useState의 값이 변경되면 실행되게 됩니다. (이 부분은 다음 단락에서 조금 더 쉽게 알려드리겠습니다.) 즉 useEffe..