본문 바로가기

[개발] Practice/React31

[React] props 를 응용한 상세페이지 만들기 💡 실습 포인트! 모달창이 열려있을 때 게시글의 제목을 클릭하면, 모달창의 제목 부분을 게시글의 제목으로 데이터바인딩을 해서 마치 상세페이지를 여는 듯한 효과를 주었다. 💜 props 이해하기 🤍 기존 모달창 다시 보기 기존 모달창을 다시 보면 제목, 날짜, 상세내용이 하드코딩되어있는데, 그 중 제목 부분이 데이터바인딩되어 보여야 하는 것이다. 🤍 props 이해하기 // 코드에서 App Component 와 Component 의 구조를 보여주기 위해 // 불필요한 코드는 임의로 제외했다. function App() { let [title, setTitle] = useState([ '[React] React 설치와 개발환경 셋팅하기', '[React] JSX 를 이용해 HTML 페이지 제작해보기', '[.. 2022. 3. 21.
[React] React 에서 반복문 활용하기 💡 실습 포인트! 이때까지의 실습에서는 위와 같이 게시글 리스트를 브라우저에 나타내기 위해 list 라는 className 을 가진 div 태그들을 각각 하드코딩을 했었다. 하지만 데이터의 양이 늘어날수록 하드코딩을 하기도 힘들거니와 파일 내의 코드가 너무 길어져 가독성이 떨어진다. 따라서, 반복문을 활용하여 코드의 길이를 줄이고 확장성을 더해주었다. 💜 map() 함수 활용하기 React 에서는 중괄호를 활용하는 JSX 문법을 사용하는데, 중괄호 안에는 변수와 함수만 들어갈 수 있기 때문에 for 문을 직접적으로 넣어서 사용할 수 없다. 하지만, array 자료형에 붙일 수 있는 map() 이라는 내장함수를 활용하면 반복문을 사용한 것과 같은 효과를 줄 수 있다. 🤍 map() 함수 알아보기 map().. 2022. 3. 21.
[React] 클릭하면 동작하는 UI (모달창) 만들어보기 💡 실습 포인트! 오늘은 클릭하면 동작하는 UI, 그 중에서 모달창을 구현해보았다. 강의에서 모달창을 디자인해놓고 클릭했을 때 모달창을 여는 방법을 알려주신 후, 과제로 버튼을 한 번 더 눌렀을 때 닫히게 해보라고 하셨다. 나는 오늘 활용했던 삼항 연산자를 가지고 코드를 작성했고, 강사님은 느낌표(!) 기호만을 가지고 더 쉽게 만드는 방법을 알려주셨다. 느낌표(!) 기호의 쓰임을 잘 알고 있다고 생각했는데, 아는 것과 잘 활용하는 것은 별개의 문제임을 다시금 깨달았다...ㅎㅎ 💜 상세페이지 겸 모달창 UI 만들기 🤍 HTML 및 CSS 코드 작성하기 HTML 제목 날짜 상세내용 CSS .modal { margin-top: 20px; padding: 20px; background-color: #eee; }.. 2022. 3. 20.
[React] React 에서 state 사용해보기_2 💡 실습 포인트! 💜 첫번째 글제목 바꾸기 버튼 및 기능 만들기 💜 가나다순으로 정렬하기 버튼 및 기능 만들기 💜 첫번째 글제목 바꾸기 버튼 및 기능 만들기 let [title, setTitle] = useState([ '[React] React 설치와 개발환경 셋팅하기', '[React] JSX 를 이용해 HTML 페이지 제작해보기', '[React] React 에서 state 변경해보기' ]); 본격적으로 기능을 만들어보기 전에 기존의 useState() 함수를 살펴보자면 위와 같다. 🤍 첫번째 글제목 바꾸기 버튼 만들기 첫번째 글제목 바꾸기 적당한 위치에 "첫번째 글제목 바꾸기" 라는 버튼을 만들어주었다. onClick 내에 함수 코드를 적기에는 코드가 길어서 changeTitle0 함수를 따로 만.. 2022. 3. 18.
[React] React 에서 state 사용해보기 💡 실습 포인트! 💜 React 에서 state 사용해보기 🤍 state 를 만들어서 데이터 저장해보기 React 에서는 변수말고도 state 라는 것을 사용하여 데이터를 저장하여 사용할 수 있다. state 를 사용하기 위해서는 일단 state 를 사용할 파일 상단에 다음과 같이 코드를 넣어주어야 한다. let [value, setValue] = useState(initialValue) 그리고 useState() 함수는 위와 같은 형태로 사용한다. useState() 함수는 state 를 하나 만들어주는 함수이며, useState() 의 소괄호 안에 저장할 데이터를 넣으면 state 에 데이터를 저장할 수 있다. useState() 함수를 사용하면 array 의 형태로 [데이터1, 데이터2] 와 같이 .. 2022. 3. 18.
[React] React 에서 Font Awesome 사용해보기 💡 실습 포인트! Font Awesome 은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리에 해당한다. 일반적인 HTML 파일에서 코드를 작성할 때와 Font Awesome 사용 방법이 다른데 터미널에서 패키지 설치할 때 매번 검색하기 힘들 것 같아서(...) 내가 보려고 포스팅을 해본다. 💜 터미널에서 Font Awesome 패키지 설치하기 🤍 Font Awesome 의 SVG 기반 아이콘을 활성화하기 위한 기본 패키지를 설치한다. (필수) npm i @fortawesome/fontawesome-svg-core 🤍 Font Awesome 아이콘에 대한 패키지를 설치한다. Font Awesome 에는 Solid, Regular, Light, Brands 와 같은 카테고리나 유/무료 여부에 따라.. 2022. 3. 18.
[React] React 설치하기 및 개발환경 셋팅하기 💡 실습 포인트! 💜 Node.js 와 VSCode 설치하기 구글에 Nodejs 검색해서 필요한 버전으로 설치한다. 구글에 Visual Studio Code 검색해서 설치한다. 나의 경우 이미 설치가 되어있고 설치방법이 어렵지는 않다고 생각해서 굳이 설치방법까지 작성하지는 않았다. 💜 작업용 폴더 생성하기 코드를 담을 작업용 폴더를 하나 만들어준다. 본인이 기억할 수 있는 위치면 어디든지 가능! 💜 VSCode 에디터를 열어서 작업용 폴더 오픈하기 Windows 를 사용하는 경우 Ctrl + K + O 단축키를 이용해서 작업용 폴더를 열어주면 된다. 메뉴에서 선택하는 경우 파일(File) - 폴더 열기(Open Folder) 를 선택하면 된다. 폴더를 선택해서 열어주면 위와 같이 VSCode 화면 왼쪽 .. 2022. 3. 18.