전체 글

cleanup function은 컴포넌트가 없어질 때 실행되는 함수이다. function이 실행될 때 function을 또 리턴해 주는 형태이다. import { useState, useEffect } from "react"; function Hello() { useEffect(() => { console.log("hi :)"); return () => console.log("bye :("); }, []); return Hello; } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ..

리액트는 첫 로드 이후 state의 변화를 감지하면 컴포넌트를 리렌더링한다. 특정 state의 변화에만 리렌더링 할 수 있게 설정하는 것이 useEffect이다. useEffect(실행할함수, deps) 의 형태인데 deps의 변화를 감지하여 함수를 실행해주는 것이다. import { useState, useEffect } from "react"; function App() { const [counter, setValue] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setValue((prev) => prev + 1); const onChange = (event) => setKeyword(event.tar..

npx create-react-app을 쓰면 react를 사용하는 데 필요한 것들을 알아서 세팅해준다. 먼저 이를 사용하려면 node.js를 설치해야 한다. 설치 후 터미널에서 node - v로 설치된 버전을 확인해볼 수 있다. 나는 16.14버전을 설치했다. npx create-react-app react-for-beginners 로 react 프로젝트 폴더를 생성했다. cd react-for-beginners 해서 폴더를 이동한 뒤 npm start하면 서버를 실행할 수 있다. 이 창이 자동으로 뜨면 성공이다. create-react-app을 통해서 컴포넌트를 분리하고 분리한 컴포넌트에 css를 각각 적용할 수 있다. 분리되어 있는 컴포넌트들은 import를 통해 가져다 쓸 수 있다. index.js..

function Btn(props) {} 이런식으로 함수를 만들면 이 녀석은 Btn이라는 컴포넌트가 된다. App() 안에 Btn 컴포넌트를 넣고 렌더링한다고 했을 때 App()은 부모 요소이다. 부모로부터 자식 컴포넌트에 데이터를 전달하는 방법이 props를 활용하는 것이다. 위의 짤과 같이 로 부모 요소 안에 자식 요소를 넣으면 Btn() 함수의 첫번째 인자에 머시기 저시기가 자바 오브젝트 형태로 들어가게 된다. (위의 짤은 console.log(props)를 한 것이다. props 안에 자바 오브젝트 형식으로 값이 들어가 있다는 걸 알았기 때문에 {props.banana}의 키로 값을 불러올 수 있다는 것 또한 알 수 있다. 이렇게 코드를 만들면 하나의 Btn()이라는 함수를 가지고 여러개의 형태로..

지난 번에 만든 시/분 계산기는 하나의 컴포넌트이다. 이런 부품을 여러개 만들어서 조합하여 페이지에 렌더링 할 수 있다. MinutesToHours 와 KmToMiles라는 컴포넌트를 만들고 state를 활용하여 state에 따라 렌더링을 다르게 한다. select와 option 태그를 활용하여 option value에 맞게 컴포넌트를 렌더링 해준다.

1. State를 하나 쓰는 예제 (분 -> 시 변환기) 분을 입력하면 반올림해서 시간으로 바꿔주는 예제이다. event.target.value로 input 안에 넣는 값을 가져올 수 있다. 2. State를 두 개 쓰는 예제 (Flip 버튼을 클릭하면 입력칸 활성화/비활성화)

리액트를 썼을 때 좋은 점은 바뀐 곳만 reRender한다는 것이다. 이 때 reRender하도록 값의 변경을 감지할 수 있도록 하는 것이 useState()이다. useState(n)를 하게 되면 [n, function] 형태의 배열을 반환한다. 자바스크립트 문법중에 배열의 값들을 다른 변수에 할당하는 문법이 있다. 예를 들어 x = [1, 2, 3] 이라는 배열이 있고 1,2,3을 a, b, c라는 변수에 담고 싶다면 a = x[0] 이런식으로 하는 방식도 있지만 const [a, b, c] = x; 이렇게 하는 방식도 있다. 이를 활용하여 useState();를 변수에 바로 할당하면 const [counter, modifier] = React.useState(0); 이런식으로 쓸 수 있다. modi..

브라우저가 JSX 문법을 이해할 수 있도록 babel을 임포트 해준다. JSX 문법은 컴포넌트를 만드는 방식인데 HTML 태그를 쓰듯이 만들 수 있게 해주는 것이다. 컴포넌트를 화살표 함수 형태로 만들어주면 필요한 곳에 렌더링 할 수 있다. 이 때 만든 변수의 첫 글자는 꼭 대문자여야 브라우저가 HTML태그로 인식하지 않는다.