React96 [React] CSS Inline Styling for React Elements Inline Styling 사용하는 법 css 스타일링 할 때 조금 덜 사용되긴 하지만 inline styling도 사용한다. React 기본형이 있다. Hello world 글자색을 빨간색으로 바꾸고 싶을 때 html 에서 하던 것처럼 스타일링을 style="color:red"로 하면 에러가 난다 이유는 문법이 틀려서이다. 1. JSX 파일에서 HTML element에 자바스크립트를 집어 넣을 때는 자바스크립트가 들어간다는 신호로 중괄호{ }로 꼭 감싸줘야 한다. 2. 여기에 더해 style properties는 스트링으로 쓰지 않고 자바스크립트 오브젝트 형태로 써줘야 한다. 그래서 또 중괄호를 해주고 그 { } 안에 key:value 페어로 넣어준다. {color: red} 그래서 {{}} 이중 컬리.. 2022. 2. 14. [React] Styling React Elements | Image jsx와 css 이용해 이미지 꾸미기 이미지를 입력해 보자 html 에서 img 태그는 / 클로징 태그가 없어도 용서가 되었지만 js 문법에서는 클로징 태그까지 꼭 같이 써줘야 한다. 방법1 방법2 child 없으면 끝에 마무리 가능 구글에서 이미지 주소를 복사해서 img src에 붙이고 className = "food-img"를 주고 css의 클래스 이름은 캐밥 케이스를 사용한다. css에서 클래스에 크기를 조절한다. 브라우저 확인 img 주소만 따로 빼서 변수로 저장하기 img 주소를 변수로 따로 빼서 저장 한 후 자바스크립트 { }를 이용해서 보여질 수 있다 같은 결과가 나온다. 이미지 자동 변경해서 보여주기 Picsum에 들어가면 랜덤 이미지를 가져 올 수 있다. https://picsum.pho.. 2022. 2. 14. [React] JSX Attributes 사용하기 JSX Attributes class를 --> className 으로 사용하기 html 태그에서 css로 효과 주고자 할 때 class를 사용해서 class ="header" 를 썼다. 하지만 jsx는 자바스크립트 문법이므로 className을 써줘야 한다. 캐멀 케이스를 사용한다. classname(x) className(o) html에서 type을 JS -> JSX로 설정으로 바꿔주기 JSX 내용을 이렇게 작성한 경우 className으로 바꿔도 Unexpected token이라는 에러는 뜬다 이 말은 지금 자바스크리트 파일에서 이런 기호를 쓸 일이 없는데 html 태그가 왜 있냐는 것이다. 이 에러를 없애주기 위해 index.html에서 여전히 text 파일이지만, js가 아닌 jsx로 바.. 2022. 2. 14. [React] { }사용법 | JS expressions in JSX & ES6 Template Literals JSX 문법 형태 앞 포스트에서 말했 듯 자바스크립트 안에 html 문법이 들어갈 수 있도록 하는 것이 JSX 파일이고 React 모듈을 불러와 자바스크립트 안에 있는 html 문법을 찾아내 자바스크립트 문법으로 바꾸는 일을 한다. 또 자바스크립트 안에 있는 html 안에 있는 자바스크립트 문법을 읽는 역할도 한다. JS > html > JS 이 들어가 있는 형태. 예를 들면 다음과 같다. HTML 문법 안에 JS 문법 들어가는 예 1. Hello World 를 프린트 해보자. 2. 변수로 바꿔 { } 사용하기 여기서 Hello Jack으로 말하고 싶다면 변수명을 중괄호로 묶으면 된다. html 문법 안에 자바스크립트 문법이 들어가 있는 상황이다. 3. { } 안 직접 계산도 가능 4. 인풋을 받아서 브.. 2022. 2. 13. [React] JSX | Babel | codeSandbox 사용법 React를 사용할 때는 JSX 문법을 사용한다. JSX 문법 React에서 사용하는 언어이다. 지금까지는 HTML, CSS, JS를 각자 파일에서 따로 코딩하였지만 JSX는 모두 모아 코딩할 수 있다. 자바스크립트는 웹사이트에 기능을 추가하는 scripting 언어이다. codesandbox 사이트 브라우저에 바로 확인하면서 볼 수 있게 codesandbox을 사용해서 코드를 작성해보자. 간단하게 리액트를 시작할 수 있다. https://codesandbox.io/s/introduction-to-jsx-forked-sdjb1?file=/src/index.js 1. 메뉴바에서 Fork를 눌러 깃허브와 연결한다. 또는 프로젝트 새로 만들어 html 내용을 위 처럼 채운다. git forking: 깃허브에.. 2022. 2. 12. [React] 리액트 탄생 배경 | 웹앱 | 리액트 컨셉 4가지 리액트는 2013년에 처음 생겼다. 그 전엔 html, css, js로 UI를 만들었다. 그리곤 이 언어들이 서버와 연결이 되었다. 하지만 Fire Fox, IE, Chrome, Safari 많은 브라우저들이 있는데 각 브라우저마다 다른 자바스크립트 코드를 짰어야 했다. 그래서 제이쿼리가 나오게 된다. 쉽게 document object model을 이용해 이 모든 브라우저를 사용할 수 있게 되었다. dom은 화면 오른쪽 클릭해서 inspect--> Elements를 보면 나오는 html 태그들이 dom이다. 자바스크립트는 이 element를 업데이트나 삭제하는 등 modify 할 수 있게 되었다. jQuery -> Backbone.js 라이브러리들이 점점 커지면서 자바스크립트 파일을 정리할 수 있는 백본.. 2022. 2. 11. 이전 1 2 3 4 다음
