리액트

먼저 리액트를 처음 실행했을때 아래처럼 메인페이지의 작동원리를 알아보자. 리액트 프로젝트를 생성할 때 같이 생성되는 여러 파일중 App.js라는 파일을 보자. App 함수 안의 html태그들이 화면상에 보여지는 메인페이지 내용들이 된다. 왜 App.js가 메인페이지가 될까? 자세한 작동원리는 이렇다. App.js에 있는 것들은 public 폴더 하위의 ...

글 목록 생성 메인 페이지에 위와 같은 글 목록을 하나 만들었다. state 사용 리액트에서 데이터를 저장하는 방법에는 {}안에 변수를 넣는 방법과 state를 만드는 방법이 있다. 다음과 같이 코드를 수정해보았다. useState() 함수는 state를 만들어 주는 함수이다. useState( 저장할 데이터 ) 이렇게 사용해 state에 데이터...

데이터를 수정하기 위해서는 복사본을 만들어야한다. 위 코드를 보자. 총 3개의 글 제목이 있고 수정버튼을 누르면 제목바꾸기() 함수가 실행되어야한다. 그러기 위해선 state변경함수인 글제목변경 함수에 글제목을 바꿔치기 해 줄 새로운 배열이 들어가야한다. 다시 말해 글제목을 글제목변경 함수와 같은 형식의 array가 되어야한다. 그러기 위해서 글제목...

Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다. componet는 다음과 같이 사용한다. function을 이용해서 함수 생성. 함수 return () 안에 원하는 HTML 작성. 원하는 곳에 함수명 작

if문 리액트 중괄호 내에서 if문을 사용할 수 없으므로 if문 대용 역할을 할 수 있는 삼항연산자를 사용해야한다. 삼항연산자를 사용해서 제목을 클릭하면 모달이 보이도록 해보자. 모달창의 상태정보를 저장하는 state를 만들었다. 모달의 상태가 true인 경우에만 모달창이 나타나도록 삼항연산자 사용 모달을 열고 닫을 버튼 생성. > 사본을 만들지 ...

자바스크립트에서 map함수 사용하기 자바스크립트에서는 중괄호 안에서 map이라는 함수를 통해 반복문을 이용할 수 있다. 위의 코드를 보자. 콜백함수 소괄호 안에 파라미터를 아무이름이나 입력한다. (저는 a로 입력) 이 a라는 파라미터는 어레이 안에 있던 모든 자료를 하나씩 출력해준다. 그럼 어레이에 있던 모든 자료가 10씩 곱해져셔 [20, 30, 40]...

자식 컴포넌트가 부모 컴포넌트의 state를 가져다 사용하고 싶은 경우엔 props를 사용해야한다. 컴포넌트에 데이터바인딩하기 부모 컴포넌트의 state를 자식이 사용하기 위해선 props를 사용하여 state를 자식 컴포넌트로 전송해주어야한다. props 사용방법 작성 함수 소괄호 내에 파라미터를 하나 추가 function Modal(props)...

라우팅이란 페이지를 나누는 방법을 말한다. 라우터 셋팅 라우팅을 하기 위해서는 react-router-dom이라는 라이브러리를 사용해야한다. 터미널에 다음과 같이 입력한다. >yarn add react-router-dom@5 라우터 셋팅은 index.js파일에서 할 수있다. index.js는 App.js에 있는 컴포넌트를 index.html에 넣어...

컴포넌트가 많아지면 css를 짜기 난감한 경우가 있다. (클래스명을 중복으로 한다던가,,, ) 그렇기때문에 컴포넌트와 css의 혼연일체가 필요하다. (css in js) 이때 사용하는 것이 styled-componts라는 라이브러리이다. 시작 터미널에 다음과 같이 입력해 설치한다. > yarn add styled-components 임포트 > impo...

sass는 css가 너무 길어지는 경우 사용하는 것으로 좀 더 프로그래밍 언어답게 css를 작성할 수 있는 문법이다. 프로그래밍 언어스럽게 sass는 변수, 함수, 반복문, 연산자등을 이용해서 css를 간결하게 나타낼 수 있다. 설치 아래 명령어를 터미널에 입력해서 설치하자 > yarn add node-sass css는 단순하고 노가다성이 짖은 원초적...