React 이미지 파일 사용하기

HTML 안에 이미지 넣고 싶으면 이미지를 import 하고 사용해야한다. import bg from './bg.png' function App(){ return ( ) } 1. import 이름 from './이미지경로' 하고 2. 이미지 경로가 필요한 곳에서 import 한 것 사용한다. 태그 사용하고 싶으면 사용한다. css 파일 사용해도 된다. Public 폴더 용도 여러 소스코드는 src 폴더에 보관하는데, 이미지같은 static 파일의 경우 public 폴더에 보관해도된다. 리액트로 개발을 끝내면 build 해주게 되는데, 지금까지 짰던 코드들을 한 파일로 압축해주는 작업이다. src 폴더에 있던 코드와 파일들은 다 압축 되는데, public 폴더에 있는 것들은 그대로 보존한다. 따라서 형태를..

• format_list_bulleted React
• · 2023. 2. 17.
• textsms

Class 이용하여 컴포넌트 생성하기

예전 리액트에서는 class 문법을 사용하였다. 개발하다보면 옛날 코드를 볼 경우도 있으니 참고해두면 좋다. class Modal2 extends React.Component { constructor(){ super() } render(){ return ( Hi ) } } 1. class 컴포넌트 이름을 작명한다. 2. constructor, super, render 함수 3개 채워넣는다 (생성자) 3. 컴포넌트는 길고 복잡한 HTML을 축약할 때 사용. return 안에 축약할 HTML을 적는다. class 컴포넌트 안에서 state 사용 class Modal2 extends React.Component { constructor(){ super(); this.state = { name : 'kim', ..

• format_list_bulleted React
• · 2023. 2. 17.
• textsms

props

자바스크립트에서는 다른 함수에 있는 변수를 마음대로 사용할 수 없다. 컴포넌트 2개가 부모 / 자식 관계인 경우는 사용 가능 부모 컴포넌트의 state 를 자식 컴포넌트로 전송해줄 수 있다. 전송 시, props 라는 문법을 사용한다. props 로 부모 -> 자식 state 전송하는 법 1. 자식 컴포넌트 사용하는 곳에서 2. 자식컴포넌트 만드는 function 으로 가서 props 라는 파라미터 등록 후 props.이름 사용한다. title 이라는 부모 컴포넌트의 state 를 자식 컴포넌트 에 전송하기 function App() { let [title, setTitle] = useState([ "title1", "title2", "title3", ]); return ( ) } function Mod..

• format_list_bulleted React
• · 2023. 2. 17.
• textsms

map 함수

map 함수 사용 array 자료형에는 map() 함수를 사용할 수 있다. var array = [2, 3, 4]; array.map(function(){ console.log(1); }) 1. array에 들어있는 자료의 갯수만큼 그 안에 있는 코드를 반복 실행해준다. console.log(1); 세 번 실행 var array = [2, 3, 4]; array.map(function(a){ console.log(a); }) 2. 콜백함수에 파라미터는 배열을 순회하며 모든 자료를 하나씩 출력해준다. 콘솔창에 2, 3, 4 출력 var array = [2, 3, 4]; var newArray = array.map(function(a){ return a * 10; }) console.log(newArray)..

• format_list_bulleted React
• · 2023. 2. 17.
• textsms

React 공부 #1

React 사용 이유 1. Single Page Application (SPA) 만들 때 사용 새로고침 없이 앱처럼 부드럽게 동작하는 웹페이지 html 파일을 한개만 사용하여 다른 페이지 보여주고 싶을 때 html 부분 다 갈아 치워서 보여줌 2. html 재사용 편리 변수에 html 담아서 사용할 수 있기 때문에 3. 같은 문법으로 앱 개발 가능 (React Native) 리액트 프로젝트 생성 1. 작업용 폴더 하나 생성 2. 터미널에서 해당 폴더 접근 후 npx create-react-app '프로젝트명' 입력 3. 해당 프로젝트 폴더 vscode 에서 열기 4. App.js 가 메인 페이지이므로 App.js 에서 코드 짜줌 5. 브라우저로 미리보기 띄우고 싶으면 터미널에 npm start 입력 Ap..

• format_list_bulleted React
• · 2023. 2. 1.
• textsms

Javascript 공부 #6

브라우저 안의 여러 저장공간 크롬 개발자도구의 Application 탭에 보면 여러가지 저장공간이 존재한다 Local Storage / Session Storage ( key : value 형태로 문자 숫자 데이터 저장 가능 ) indexed DB ( 크고 많은 구조화된 데이터를 DB처럼 저장 가능, 문법 더러움 ) Cookies ( 유저 로그인 정보 저장 공간 ) Cache Storage ( html css js img 파일 저장해두는 공간 ) 개발자가 선택해서 사용하면 되는데 범용적으로 사용 가능한 Local Storage 사용해보자 Local Storage 는 문자, 숫자만 key : value 형태로 저장 가능하고, 5MB 까지만 저장 가능하다. Local Storage는 브라우저 재접속 해도 영..

• format_list_bulleted Javascript
• · 2023. 1. 20.
• textsms