Front porject 4일차

오늘은 서브페이지중에서 선수기록 및 소개창을 만들어보았습니다. 

야구선수의 포지션에는 총 5가지로 분류가되어있습니다. 감도/코치, 투수, 내야수, 외야수, 포수로 구성이되어있는데, 선수들의 포지션별로 선수가나열이되는 페이지를 만들어보았습니다. 

 

아 그리고 그전에  react에서 컴포넌트태그로 여러페이지로 나눌수가있는데 오늘은 Route를 통해서 서로 연결을 시켜주는 작업을 해주어 페이지정리를 해주었습니다.

 

npm install react-route-dom을 설치를 해주었습니다 그 뒤에

 

화면에 출력되는 app를 BrowserRouter에 감싸주었고 app안에있는 여러페이지들의 경로를 다 정리해주었다.  

특히 네비게이션바, 소셜미디어고정창, 풋터를 고정이기에 Route밖에 빼주었다. 

 

자 그럼이제 선수소개페이지를 만들어보겠다 .

첫번째로 select페이지를 생성해주어 선수들의 포지션을 선택할 수 있는 창을 만들었다 코드는 다음과 같다. 

 

4개의 링크를 걸어주어서 각 포지션별로 선수들의 데이터를 담아주어 출력을 시켜주는 역할을 하였다. (감독도추후에 할 예정!) 

 

css적용하고 /proteam링크에 넣어준 모습은 다음과 같다. 

 

저걸 선택해주면 선수들이 나온느 페이지를 만들어한다.