[새싹 프론트엔드] 22.11.26

 

새싹에서 개인프로젝트 발표를 끝난 뒤,

수준높은 연극도 보여주고 피자와 치킨 그리고 정체불명 떡볶이도 사줬다. 

 

새싹은 정말로 수강생들에게 많이 신경써주고 잘대해준다.

필요한게 있으면 지원해주고 간식들도 자주 사준다. 

 

하지만 대가 없는 친절은 없다.

친절한 새싹과 서로 웃으면서 끝나고싶다.

 

React 에 대해 알아보자 !

 

---

 

 

JSX 문법을 사용한다고 되어 있는데 

이건 JavaScript 에 XML 을 추가한 문법이라고 한다.

아직 JS 마저도 소화를 못시켜서 소화기관에 무리가 가고있는데 

대참사가 따로 없다.

 

JSX 의 장점을 찾아봤는데 다음과 같다

 

- 개발자 경험 개선 : 표현력이 뛰어나 코드를 읽기 쉽다.

 

- 팀의 생산성 향상 : 전문 개발자 외에도 개발 지식이 있는 팀원이 있다면 코드를 수정 할 수도 있따.

 

- 문법 오류와 코드량 감소 : 작성해야 될 코드가 줄며, 실수나 반복 스트레스를 줄여준다.

 

 

그리고 리액트는 '라이브러리' 라고 한다.

라이브러리는 특정 기능을 구현하기 위해 미리 만들어진 코드 또는 함수의 집합이라고 한다.

 

라이브러리 종류로는 React, jQuery, tensorflow, pandas 등이 있다고 하는데

여기서 내가 그나마 들어본건 React 뿐이다.

React 가 반갑다니 헛웃음나온다.

---

 

 

얼핏 보면 '가위, 바위, 보' 같지만

화살표를 보면 Framework 는 떠넘기고 Library 가 받는 역할을 하는 것 같다.

 

---

 

 

React 의 화려한 스펙을 말해주고 있다 - 1

 

---

 

 

React 의 화려한 스펙을 말해주고 있다 - 2

 

---

 

 

.... 

 

 

뭐 이렇게 저렇게 리액트에 대해 알아봤다

솔직히 뭐라는지 잘 이해가 되지 않는다 

왜냐면 처음하는거니깐 ㅎㅎ 

 

문제를 풀어보자 !

 

---

 

 

버튼을 누를 때 마다 글의 색상이 변하는 꿀잼문제이다.

이걸 한번 풀어보자 !

 

 

리액트는 내가 JS 파일을 만들어서 여기서 맛있게 요리를 하면

App.js 라는 그릇에 맛있게 담아준다 

 

위의 문제가 3번 문제 였으니까 'Study3.js' 로 명칭을 정했다.

 

VS Code 에서 확장에서 'React' 로 치면 나오는 code snippets 인가 그런걸 깔면

'rfce' 를 누르면 간단한 리액트 틀을 자동 완성 해준다.

위에꺼 말고 여러가지 많던데 그냥 다들 가슴이 시키는걸로 하면 된다.

 

 

기존의 색깔과 변경 시킬 색깔을 변수로 지정 한 다음

다른걸로 바뀌는 값을 줄거니까 useState 를 사용한다.

 

그 후 색깔이 변하는 함수를 줘서 정리한 다음

return 값에 

<h1>{value}</h1> 에 스타일태그를 줘서 color(색상) : color(변수) 로

각 함수에 적어놓은 다른 색으로 버튼을 누를 때 마다 색상을 변하게 해줬다.

 

---

 

 

이러면 버튼을 누를 때 마다 색상이 변하는 꿀잼문제 Clear !

 

 

아직 자바스크립트의 늪에서 빠져나오지 못하고 있는 내게

리액트가 귓가에 속삭인다.

이래도 개발자 할거냐고 

 

---

새싹DT 기업연계형 프론트엔드  실무 프로젝트 과정 6주차 블로그 포스팅