배열 렌더링 보통 리액트를 통해 배열을 렌더링하면 기본적으로는 컴포넌트에 'users[0]' 이런식으로 해서 직접 넣어줘서 코드를 작성할 것이다. 하지만 이렇게 한다면 계속 JSX를 작성해야하기 때문에 굉장히 불편하고 번거로울 것이다. 따라서 배열 컴포넌트 외에 렌더

리액트에서 사용하는 프로젝트에서 가끔씩 DOM을 직접 사용해야 하는 상황이 올 수 있다. 그래서 리액트에서는 ref를 사용한다. 함수형 컨포넌트에서 ref를 사용할때는 useRef라는 hook함수를 사용한다. 클래스 컴포넌트에서는 React.createRef() 또는

하나의 input 처리하기 input의 onChange 이벤트를 사용하고 이벤트 객체를 e로 받아 사용했다. e.target은 input DOM, e.target.value은 현재 input에 입력한 값을 가져온다. 여러개의 input 처리하기 const {nam

useState함수를 통해 바뀌는 값을 관리할 수 있다. 카운터에서 버튼을 클릭했을때, 실행되는 함수를 작성해보자. 💥여기서 주의해야할 점은 `에서 `처럼 함수를 호출해버리면 안된다. 그렇게 되면 컴포넌트가 렌더링될때 호출이 되어버린다. 우리는 클릭되었을때 함수를

조건부 렌더링이란 특정 조건이 참인지 거짓인지에 따라서 다른 결과를 보여주는 것을 의미한다. true는 자바스크립트 값이기 때문에 중괄호로 감싸주어야한다. Hello 컴포넌트에서 isSpecial값이 true면 *표시가 나오도록 해준다. 이 기능은 '삼항연산자'를 통

리액트에서는 '컴포넌트'라는 구성단위로 프론트 개발을 하게 된다. 컴포넌트는 구성요소라는 뜻인데, 화면을 구성하는 요소들을 각각 만들고 그것을 하나로 합쳐 하나의 페이지가 되는 형식이다.이 컴포넌트 또한 작게 쪼개서 작은 부분을 합쳐 하나의 컴포넌트로 만들 수 있다.