자기계발 캠퍼스

React의 JSX를 복습하는 차원에서 간단한 title과 Button을 만들었다. 그리고 Container에 담아 title과 Button component를 썼는데... 잉...? 왜 색깔이 다르지...? 분명 Button은 component로 작동한 거 같은데...title에 뭐가 문제지...? 그냥 render를 시켰는데 당연히 에러가 떴다. 이유는 너무나 간단하게도 대소문자 소문자로 title을 적으면 그냥 html 태그로 읽어버리고 React에서 component로 활용하기 위해서는 무조건 첫 글자가 대문자여야한다. React 강의 들으면서 배울 때는 배운 그대로 응용하면 코드가 다 잘 되서 뭐가 문제지 싶었는데 이런 디테일을 놓치고 있었다니... 그래서 대문자로 바꿔놓으니 같은 색깔 너무 푸..

First Name, Last Name, Email에 값을 입력하면 왼쪽과 같이 표시될 수 있게 만드는 연습입니다. 1. 각 input 별로 value를 따로따로 조작 2. input에 입력된 value를 실시간으로 화면으로 출력 input에 변화가 일어날 때마다 handleOnchange라는 함수를 호출해줄 거고 각 input 별로 name을 붙입니다. contact이라는 변수값을 const로 선언하고 fName, lName, email의 키 값을 선언해주었습니다. handleOnchange는 onChange라는 이벤트가 발생하는 타겟의 name과 value를 받아서 setContact를 실행해줍니다. 이 때 기존에 contact에 들어있는 값을 prevContact로 받아서 그 위에 [name] : ..

Hook 이라 함은 저번에 살펴본 UseState를 활용하는 것입니다. https://selfdevelopcampus.tistory.com/entry/ReactHook-useState-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 React(Hook) - useState 활용하기 오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 c.. selfdevelopcampus.tistory.com 이 Hook을 사용하여 Array에서 push 메소드와 똑같은 기능을 하는 걸 만들어보려 합니다...

오늘은 리액트 훅 useState를 살펴보겠습니다. (링크: 리액트 훅 공식문서) const [count, setCount] = useState(0) count라는 변수를 const로 선언을 해주고 초기값에 0을 부여했다는 의미입니다. setCount는 count 변수를 조작해주는 콜백함수(?) 같은 녀석입니다. 이렇게 increase와 decrease라는 함수에서 setCount를 조작하였습니다. increase 실행 -> count에 1을 추가해서 count 값을 set해준다. decrease 실행 -> count에 1을 빼서 count 값을 set해준다. 그리고 각 버튼 onClick시 함수를 실행하게 설정해놓으면 즉시 화면에 더하기 빼기 된 결과가 출력됩니다. 우리가 신경쓰지 않아도 1이 계속 추..

emojipedia라는 토이 프로젝트로 array.map과 component를 결합하는 것을 배웠습니다. 위 화면을 띄우기 위해 component를 만들지 않으면 이렇게 App.jsx에 수많은 div들이 등장합니다. dictionary 클래스를 가지고 있는 dl 태그 안에 term 클래스를 가지고 있는 div가 반복되고 있습니다. (코딩할 때 반복이 보이면 무조건 함수를 사용하든 뭘 하든 줄이라고 배웠습니다.) 일단 단어가 들어갈 Entry라는 component를 만듭니다. emojipedia.js에 id, emoji, name, meaning의 데이터를 array의 방식으로 저장했기에 그 안에 props로는 name, emoji, description을 argument로 받을 수 있게 구성했습니다. (..

ReactDOM.render로 각종 HTML 태그를 입력해서 화면에 출력할 수 있었고 이를 잘게 쪼개서 component로 바꿀 수 있었습니다. Card 라는 component를 만들어서 를 여러개 입력하면 그만큼 출력이 가능하죠. (비욘세 누나 너무 아름다우시네...) 이렇게 component를 만든다면 비욘세 누나만 계속 나오고 다른 인물들을 추가하기 위해서는 새로운 component를 또 만들어줘야 합니다. (물론 저는 비욘세 누나 있는 component만 반복해서 출력해도 너무 좋습니다.) 하지만 아쉬워하실 분들을 위해 props라는 기능이 있습니다. HTML 태그 안에 속성부터 태그 안에 넣을 데이터까지 컨트롤이 가능합니다. 함수에 props라는 인자만 추가해준다면 말이죠. 라는 태그 안에 na..

이전에 배운 걸 토대로 h1과 ul을 화면에 출력시키려면 위의 코드처럼 작성하면 됐다. React를 들어보면서 component라는 말을 정말 많이 들어봤는데 드디어 오늘 처음 배웠다. 뭔가 새로운 걸 알았다는 설렘과 이렇게 편한데 내가 지금까지 한 건 뭐지...라는 회의감이 온다. 제목에 해당하는 h1태그를 Heading.jsx라는 파일로 따로 만들고 list에 해당하는 부분들을 전부 끌고 와서 List.jsx라는 파일로 따로 만들었다. jsx 파일 형식은 React에서 작동하는 자바스크립트이므로 꼭 앞에 React를 import 해주어야 한다. 그리고 각각의 파일 맨 마지막에는 Heading과 List를 default로 export 할 수 있도록 코드를 작성했다. 얘네를 이제 App.jsx 파일로 가..

HTML 태그에 class를 부여해서 styling을 하는 것 외에 태그 안에서 inline styling도 가능합니다. HTML에서 이렇게 작성하면 되는데 react에서는 object를 대입시키는 방식으로 작동합니다.

ReactDOM.render로 불러온 HTML에 CSS를 입혀보려 합니다. img 태그 3개를 불러와서 각각의 태그에 className을 붙여줍니다. ※유의사항 HTML 파일에서는 태그 안에 class = "class-ex1" 이런 식으로 클래스를 추가해주는데 React에서는 className = "class-ex"으로 클래스를 추가해주어야합니다. Camel Case로 써야한다는 점도 잊으면 안 됩니다. 각각의 img 태그의 class를 불러와서 height와 width를 100px로 맞춰보겠습니다. 그러면 위의 화면과 같이 사진 3개가 똑같이 100 x 100 으로 출력됩니다. img 주소를 담은 변수 img를 선언한 후에 src에 대입해줘도 됩니다. -lorem ipsum이 아무 텍스트를 가져와준다면..

오늘부터 React 공부를 시작했습니다. 그동안 vanila js만 계속 다뤘었는데 이제 새로운 프레임워크를 배운다고 하니깐 한편으로는 되게 설레네요ㅎㅎ 오늘 배운 내용 복습 들어갑니다. react와 react-dom을 import를 활용해서 불러옵니다. (npm 쓰듯이 require 써도 됩니다.) ReactDOM.render를 사용하는 방법은 위와 같습니다. express에서 render를 썼던 것과 똑같은 기능을 하는데 내용과 위치를 parameter로 받아야 합니다. body 안에 id가 root라는 div tag가 있다고 하면 그 안에 h1 태그를 넣으려고 한다면 그저 HTML을 입력하듯이 parameter로 입력하면 됩니다. 그러면 이렇게 Hello World!가 짠 하고 등장합니다. 단순 t..