React8 [React] - input Input 상태 관리하기 InputSample.js 생성 App.js 수정 input에 입력하는 값이 하단에 나타나고 초기화 버튼을 누르면 input의 값이 비워지도록 구현해 보겠습니다. useState와 input의 onChange라는 이벤트를 사용해 보겠습니다. 이벤트에 등록하는 함수에서는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데 이 객체의 e.target은 이벤트가 발생한 DOM인 inputDOM을 가리키게 됩니다. 이 DOM의 value 값 즉, 이 값을 useState를 통해서 관리해 주면 됩니다. inputSample을 수정해 보겠습니다. useState를 사용하여 초기값은 빈 값을 나타내기 위해 useState(''); 이렇게 코드를 구현했습니다. input태그 안에는 onCh.. 2023. 9. 27. [React] - useState useState를 통해 컴포넌트에서 바뀌는 값 관리하기 useState useState를 이용하여 사용자 인터랙션에 따라 동적으로 값이 변하는 것을 구현해 보겠습니다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. 리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. useState라는 함수가 리액트의 Hooks 중 하나입니다. 우선 화면 구성을 위해 Counter.js 파일을 만들어 보겠습니다. 태그 안에 태그와 태그를 이용하여 화면을 구성해 봤습니다. App.js에서 Counter.js를 렌더링 하기 위해 App.js를 수정해 보겠습니다. 실행 시켜 보면 이런 UI가 보여지게 됩니다. 이벤트 설정 이제 Cou.. 2023. 9. 27. [React] - 조건부 렌더링 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 결과물을 렌더링 하는 것을 의미합니다. 예를 들어, App.js 컴포넌트에서 Hello.js 컴포넌트를 사용할 때, isSpecial이라는 props를 설정해보겠습니다. 여기서 true는 자바스크립트 값이기 때문에 중괄호로 감싸주었습니다. 그리고, Hello 컴포넌트에서 isSpecial이 true이냐 false이냐에 따라서 컴포넌트의 좌측에 *표시를 보여줘 보겠습니다.이를 처리하는 가장 기본적인 방법은, 삼항연사자를 사용하는 것입니다. isSpecial 값이 true라면 *를, 그렇지 않다면 null을 보여주도록 했습니다. 참고로 JSX에서 null, false, nudefined를 렌더링하게 된다면 아무것도 나타나지 않게 됩니다. 보통 삼항연사자를 .. 2023. 9. 22. [React] - Props Props를 통해 컴포넌트에게 값 전달하기 Props는 Properties의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에 전달해줘야 할 때, props를 사용합니다. Props의 기본 사용법 App 컴포넌트에서 Hello 컴포넌트를 사용할 떄 name이라는 값을 전달해주고 싶다고 가정하면 이렇게 코드를 작성하면 됩니다. 이제 Hello 컴포넌트에서 name값을 사용 하고싶을 때, 위 코드와 같이 작성을 하고, Hello.js를 위 코드와 같이 작성합니다. 컴포넌트에게 전달되는 props는 파라미터를 통 하여 조회할 수 있습니다. props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶다면 props.name을 조회하면 됩니다. 여러개의 props, 비구조화 할당 Hello 컴포넌트에 또 다른 .. 2023. 9. 21. [React] - JSX 규칙 JSX 규칙 태그는 꼭 닫혀있어야 합니다. 태그를 열었으면 이렇게 꼭 닫아주어야 합니다. HTML에서는 input 뜨는 br 태그를 사용할 떄 닫지 않고 사용하기도 합니다. 하지만, 리액트에서는 그렇게 하면 안됩니다. 이렇게 닫아주거나 이렇게 닫아주어야 합니다. 두가지 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다. 이렇게 작성하면 이런 에러가 발생하게 됩니다. 이렇게 전체를 감싸주면 되지만, 불필요한 div로 감싸는게 별로 좋지 않은 상황도 있습니다. 그럴 땐, 리액트의 Fragment라는 것을 사용하면 됩니다 태그를 작성할 때 이름 없이 작성을 하게 되면 Fragment가 만들어지는데, Fragment는 브라우저사에서 따로 별도의 엘리먼트로 나타나지 않습니다. JSX 안에 자바스크립트 값 .. 2023. 9. 21. 이전 1 2 다음
